Archived topic
element hook woocommerce-after-main-content smashup
5 replies · Started by Allen on April 12, 2022
I created an Element for some html that I want to show below the products of specific Woocommerce category pages, full width.
So I create this per the screen capture, then select the hook name 'woocommerce-after-main-content'.
But instead of this html going below all the products and at full width, it sits on the side of the products splitting the space with the products: https://adasignfactory.com/wp/product-category/building-signs/numbersnavigation/
(If I select the hook 'woocommerce-before-main-content' it goes before the content at full width.)
Any suggestions? Thank you!
Hmm, sorry, I thought I'd be able to attach a screenshot of the Element page. I don't see an attachment option. So below is the html used:
<hr>
<div class="fortyK-signs">40,000+ ADA SIGNS IN-STOCK AND READY-TO-SHIP!</div>
<div class="free-shipping">FREE USA GROUND SHIPPING ON ALL STOCK SIGN ORDERS $99+ <a class="details" href="/wp/shipping-information/">DETAILS ></a></div>
<hr>Hi Allen,
With your current structure, you may try adding this CSS in Appearance > Customize > Additional CSS:
body.woocommerce.archive div#content {
display: flex;
flex-direction: column;
}This would take effect on WooCommerce Archive pages.
If you plan to add a sidebar, you would probably need a different hook and a different CSS code. For instance, generate_before_footer.
Hope this helps! Kindly let us know how it goes. :)
Thanks Fernando. I went with the before_footer hook, as now I can assign it to non-woo pages. Worked perfectly!
You’re welcome Allen! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)
