- This topic has 7 replies, 2 voices, and was last updated 5 years, 9 months ago by David.
-
AuthorPosts
-
June 26, 2018 at 2:38 pm #609347Mike
Hello,
I am trying to create a full width border between my woo commerce product description and the related products box.
The problem I have when setting the border-top of the related products box to 1px is that its not the full page width as the footer border-top is.
So it means that the line further down is longer and it looks wrong.
I need the line to be the same width as that of the page with 25px either side, just as it set in the footer.
A real challenge I suspect!
Thanks,
MikeJune 26, 2018 at 3:44 pm #609369DavidStaffCustomer SupportHi Mike,
simplest way would be to remove the Related Products from Customiser > Layout > Woocommerce > Single Product.
And then add this PHP to the before footer hook in GP Hooks:
<?php if ( is_woocommerce() && is_product() ) { ?> <div class="site-footer relate-products-hook"> <?php echo do_shortcode('[related_products]'); ?> </div> <?php }?>
Check Execute PHP and save.
The shortcode is wrapped with the
site-footer
class so will inherit the top border and side padding. Therelate-products-hook
is just a custom class in case you want to target the container serparately.June 26, 2018 at 4:06 pm #609393MikeHello David,
That kind of worked. I now have the problem that the table does not display correctly anymore and it is still getting the top line despite me removing the code, I suspect this is beacuse it is inheriting the footer CSS.
Any ideas how to solve this?
Thanks,
MikeJune 26, 2018 at 4:17 pm #609395DavidStaffCustomer SupportHi Mike, thats really odd – the before_footer hook shouldn’t be inside the footer….. try moving the code to the after content hook. If still no joy then remove the site-footer class and apply the same styles to the relate-products-hook
June 26, 2018 at 4:27 pm #609403MikeHello,
I found half the problem! I had put the code into the before footer content hook and not the before footer hook.
However it still seems to be having issues, it is still only displaying three columns on one row and then pushing the forth below it!
Very odd!
Any ideas?
Thanks,
MikeJune 26, 2018 at 4:36 pm #609408DavidStaffCustomer SupportTry adding this CSS:
.woocommerce .relate-products-hook .related ul.products li.product { width: 21.2%; }
June 26, 2018 at 4:45 pm #609411MikeHello,
That CSS worked a treat! I encased it in a media query so that on mobile it still displayed stacked.
@media (min-width: 767px) { .woocommerce .relate-products-hook .related ul.products li.product { width: 21.2%; } }
Help much appreciated!
Thanks,
MikeJune 26, 2018 at 4:48 pm #609413DavidStaffCustomer SupportYou’re welcome Mike, wasn’t too painful after all 😉 Glad to be of assistance
-
AuthorPosts
- You must be logged in to reply to this topic.