This topic has 14 replies, 3 voices, and was last updated 6 years, 3 months ago ago by Olga Barlow
Hey,
First, I want to say sorry. Sorry for asking you for help so often. I can imagine how stressful it is over time. And thank you for always helping! Nevertheless, I would like to ask you once again for help:
Is it possible to make the following changes to the single product page:
1) How did you get the wish list next to the shopping cart button? Or is this just because of the sidebar?
I know, I’ve asked that before, but I just noticed that in your documentation ^^
Here the link:
https://www.8theme.com/documentation/docs/single-product-page/
2)Is it possible to adjust that the customer can only buy one product at a time?
Best Regards
Joey
Hello,
Thank you for using our theme.
1. Sorry for the incorrect screenshot in our documentation. That position for the wishlist is missing, by default, but you can achieve the similar result http://prntscr.com/kj9sz3 by adding this code in Theme Options > Styling > Custom css > Custom css for desktop:
.single-product .yith-wcwl-add-to-wishlist {
display: inline-block;
}
.single-product .add_to_wishlist {
font-size: 0px !important;
}
.single-product .product-information .cart {
width: 55%;
}
2. Try to add this code in Global custom css area:
.single-product .qty-span, .single-product .quantity {
display: none !important;
}
Regards
Hey Rose,
That is pretty awesome.
But now that the quantity is invisible, the wish list is far away from the shopping cart:
Is it possible to apply the width only to the line with the shopping cart?
Because the line with the product variations gets thereby an unsightly line break
And could you tell me how to give the wishlist a background so that it would look like this:
I’m sorry for all the inconvenience^^
Regards
Joey
Hello,
In this case, you can add this code in Global custom css:
.single-product .yith-wcwl-add-to-wishlist {
position: absolute;
bottom: 12%;
right: 5%;
background-color: #262626;
padding: 14px 12px 1px 15px;
}
.single-product .add_to_wishlist {
font-size: 0px !important;
display: inline-block;
}
.single-product .add_to_wishlist:before {
margin-right: 0px !important;
color: white;
}
.single-product .yith-wcwl-add-button.show {
width: 20px;
}
http://prntscr.com/kjb00g
The wishlist button will be placed on right of Add to cart button to prevent problems with the position on different devices.
Regards
Hey,
That is good, but there are two problems now:
For products with 4 variations everything is at the right height. For products with more than 4 variations, however, the variation name and the variations are no longer at the same height.
2) illustrated here once again
Can I remove the text after adding to wishlist? This makes problems on the phone. I would like to dye the wish list icon black just after the click. This is also the case on the product page.
Best Regards
Joey 🙂
Hello,
1. Thanks for the video.
Please try this code:
.single-product .woo-variation-items-wrapper {
padding-top: 16px !important;
}
2. You can add this code:
.single-product .product-information .yith-wcwl-wishlistexistsbrowse a:not(.alt):before, .single-product .product-information .yith-wcwl-wishlistaddedbrowse a:not(.alt):before {
content: "\f004" !important;
color: #000 !important;
font-size: 1rem;
}
.single-product .yith-wcwl-add-to-wishlist a {
font-size: 0px !important;
}
.single-product .yith-wcwl-add-to-wishlist {
width: 25px;
}
+ change “bottom” value to 11% here – http://prntscr.com/kjce49
Regards
Hey,
Many thanks!
But there are again a few problems 😀
video
The wishlist is after the click above. And now the products with 4 variations and less are no longer on the same level.
Regards
Joey
Hello,
1. Please delete this http://prntscr.com/kjcxij and this code http://prntscr.com/kjcxu6
2. Change this http://prntscr.com/kjcyzq to:
.single-product .product-information .yith-wcwl-wishlistexistsbrowse a:not(.alt):before, .single-product .product-information .yith-wcwl-wishlistaddedbrowse a:not(.alt):before {
content: "\f004" !important;
color: #000 !important;
font-size: 1rem;
}
.single-product .yith-wcwl-add-to-wishlist a {
font-size: 0px !important;
}
.single-product .yith-wcwl-add-to-wishlist {
width: 20px;
}
and this http://prntscr.com/kjczmv to http://prntscr.com/kjczr8
Regards
Please change this http://prntscr.com/kjdei7 to 1.25rem and this http://prntscr.com/kjdesb to:
.single-product .yith-wcwl-add-to-wishlist {
width: 20px;
font-size: 0px;
line-height: 3;
}
Let me know the result.
Regards
Damn rose, you know your work.
Thanks you a lot.
For today you have then first rest in front of me ^^
Best Regards
Joey
You’re welcome 🙂
Have a nice day
Regards
Have a nice day too.
But nvm, there is a new problem, im so sorry, i didnt see it before^^:
video
The delivery time is now hidden after selecting the variations.
On the phone, however, it is still visible.
Or is it perhaps even possible to position the delivery time and shipping costs directly above the shopping cart:
to
Regards
Hello,
That information is related to WooCommerce Germanized plugin. For that product, we don’t see mentioned information even on mobile. Do you have this problem with our theme only? Does it work fine with the default WooCommerce theme Storefront? Because we are able to help you only in case problem appears with our theme only and everything works fine with the default theme. In other cases, you need to contact plugin author about all the questions related to that plugin functionality.
Regards
You must be logged in to reply to this topic.Log in/Sign up