After buying the premium plugin i started customizing the design a bit but i came to few big issues I can't solve.
1. How can I change the size of the thumbnails presented to the user? I want the entire images block to be 100% wide and the images inside to be in proportion larger.
2. How can I remove the grey separator line between products?
3. For some reason I can't hide the "this item" although it is off in the settings. How can to fix it?
4. All and all I would like to make smaller gaps between all the elements in the display, it takes to much screen space currently. (I don't use the Responsive mode as its even larger. I prefer it like this, but smaller gaps) Can you assist in some CSS code to customize it?
About "this item", it always be shown if you use a shortcode or using separate add-to-cart button. For this example https://app.screencast.com/fEBuhcONr7JQX, if we hide "this item", the buyer can't know which size of the main product was selected.
Hi,
After buying the premium plugin i started customizing the design a bit but i came to few big issues I can't solve.
1. How can I change the size of the thumbnails presented to the user? I want the entire images block to be 100% wide and the images inside to be in proportion larger.
2. How can I remove the grey separator line between products?
3. For some reason I can't hide the "this item" although it is off in the settings. How can to fix it?
4. All and all I would like to make smaller gaps between all the elements in the display, it takes to much screen space currently. (I don't use the Responsive mode as its even larger. I prefer it like this, but smaller gaps) Can you assist in some CSS code to customize it?
Link to my product page: https://divinedglow.com/shop/hope-and-pain/
Thank you very much in advance.
Marco
Attached files: Larger thumb pictures and smaller gaps .png
Hide this item is not working.png
Something went wrong in the title. Sorry about it. it should say: "Customizing Frequently Bought Together: size and appearance of elements"
Hi Marco,
For these requirements 1 + 2 + 4, please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:
.woobt-wrap .woobt-images .woobt-image { width: 150px; flex: 0 0 150px; } .woobt-wrap .woobt-products, .woobt-wrap .woobt-products .woobt-product { border: none; } .woobt-wrap .woobt-products .woobt-product { padding: 2px 0; } .woobt-wrap .woobt-products .woobt-product .woovr-variations { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .woobt-wrap .woobt-text, .woobt-wrap .woobt-products { margin-bottom: 0; }And the result is https://app.screencast.com/fEBuhcONr7JQX. You can also do more tweak base on that structure.
About "this item", it always be shown if you use a shortcode or using separate add-to-cart button. For this example https://app.screencast.com/fEBuhcONr7JQX, if we hide "this item", the buyer can't know which size of the main product was selected.
Best regards,
Dustin
Thank you very much Dustin!!
It is perfect, I made all my necessary tweaks to perfection. Highly appreciate your support. 5 Stars!
And thank you for giving me the context regarding item #3. Make sense.
Thanks and keep rocking!
You're welcome!
If you are satisfied with our plugin and support, please reward it with a full five-star ★★★★★ rating.
https://wordpress.org/support/plugin/woo-bought-together/reviews/?filter=5
Thank you in advance! ♥
Best regards,
Dustin
Happy to rate. you deserve it.