|
mipstickyvette
|
October 24, 2017 at 8:22 am
Hi, we’ve asked the theme developer team from Avada to help us troubleshoot the issue we’re encountering with the broken products layout in Woocommerce and they have found that EE4 plugins create extra divs that are the culprits.
They’ve sent me a screenshot but I’ll only be able to share it with you when you reply as there’s no place to attach it here.
Is there a way to tweak these divs? Any solutions to fix this issue?
Here’s an example: https://www.mipstick.com/product-category/customized-nutrition/
You’ll notice that it forces the products to go to the next row instead of flowing nicely and filling the entire width of the page.
Please help!
|
|
Tony
|
October 24, 2017 at 10:45 am
Hi there,
Another user posted the same issue with Avada here:
https://eventespresso.com/topic/ee-interaction-with-woocommerce-products-archive-page/
Josh provided a solution, editing the template involved here:
https://eventespresso.com/topic/ee-interaction-with-woocommerce-products-archive-page/#post-142867
Now you’ll want to copy the template you are editing to a child theme and edit the copy so your modifications are not lost the next time you update Avada.
|
|
Josh
|
October 24, 2017 at 11:27 am
Another solution would be to fix the Avada theme’s CSS. Normally the extra divs from Event Espresso do not break anything, but Avada has some CSS that doesn’t allow the extra divs (without something breaking).
This is the relevant section from Avada’s embedded CSS:
.products-6>li:nth-child(6n){margin-right:0}.products-6>li:nth-child(6n+1){clear:both}.products-5>li{float:left;width:19.2%;margin-right:1%;margin-bottom:11px}.products-5>li:nth-child(5n){margin-right:0}.products-5>li:nth-child(5n+1){clear:both}.products-4>li{float:left;width:24.25%;margin-right:1%;margin-bottom:11px}.products-4>li:nth-child(4n){margin-right:0}.products-4>li:nth-child(4n+1){clear:both}.products-3>li{float:left;width:32.6%;margin-right:1%;margin-bottom:11px}.products-3>li:nth-child(3n){margin-right:0}.products-3>li:nth-child(3n+1){clear:both}.products-2>li{float:left;width:49.5%;margin-right:1%;margin-bottom:11px}.products-2>li:nth-child(2n){margin-right:0}.products-2>li:nth-child(2n+1){clear:both}.products-1>li{float:left;width:100%;margin-bottom:11px}.products-1>li:nth-child(2n){margin-right:0}.products-1>li:nth-child(2n+1){clear:both}
which if that gets changed to:
.products-6>li:nth-child(6n){margin-right:0}.products-6>li:nth-of-type(6n+1){clear:both}.products-5>li{float:left;width:19.2%;margin-right:1%;margin-bottom:11px}.products-5>li:nth-of-type(5n){margin-right:0}.products-5>li:nth-of-type(5n+1){clear:both}.products-4>li{float:left;width:24.25%;margin-right:1%;margin-bottom:11px}.products-4>li:nth-of-type(4n){margin-right:0}.products-4>li:nth-of-type(4n+1){clear:both}.products-3>li{float:left;width:32.6%;margin-right:1%;margin-bottom:11px}.products-3>li:nth-of-type(3n){margin-right:0}.products-3>li:nth-of-type(3n+1){clear:both}.products-2>li{float:left;width:49.5%;margin-right:1%;margin-bottom:11px}.products-2>li:nth-of-type(2n){margin-right:0}.products-2>li:nth-of-type(2n+1){clear:both}.products-1>li{float:left;width:100%;margin-bottom:11px}.products-1>li:nth-of-type(2n){margin-right:0}.products-1>li:nth-of-type(2n+1){clear:both}
The layout will snap back into place. See also:
https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
|
|
mipstickyvette
|
October 24, 2017 at 2:31 pm
We’ve implemented the recommendation from Tony above and it worked.
Thank you for your help guys!
|
