Content Width above WooCommerce Products « Support Forum | Kriesi.at

Support Forum » Abundance

Content Width above WooCommerce Products

6 posts from 4 voices

Started 8 months ago by kitticraft
Latest reply from Ismael
This topic is not a support question

Tags:

kitticraft
Member

Hi,

I'm trying to add content above my products on my WooCommerce Shop page, the width seems to stop right before the "sort by" drop down. How can I get the content to span the entire width of the container and flow under the sorting dropdown?

See: http://kitticraft.staging.wpengine.com/shop/

Thanks,
Lawrence

Posted 8 months ago #
Nick
Moderator

Hi,

You would have to rebuild multiple templates. There are not many themes out there that offer this functionality. You have to place the entire sidebar price structure right on top of the store, in a div and then use floats, margins, padding to keep it in place while making room for the content. blackjackchamp.com uses such a structure to keep the right sidebar in place but the code will crash every single css validator despite somehow working in all browsers. Most sites just leave that empty space alone, or place something sticky there that stays with the visitor as they scroll up and down.

Thanks,

Nick

Posted 8 months ago #
kitticraft
Member

Hi Nick,

Thank you for taking a look at my problem; I accept that often what appears to be simple is not simple to implement. I however am not sure if I have described my requirement properly, so I have chosen to make a mockup image to better illustrate what I am trying to achieve.

Currently when I put content into my "Shop" page, the content appears left justified with a large space on the right as shown here(indicated by the red outline):
http://kitticraft.staging.wpengine.com/download/KCImg1.jpg

What I am trying to achieve is to have the content take up the remaining space on the right as shown here:
http://kitticraft.staging.wpengine.com/download/KCImg2.jpg

Is this unobtainable as you describe above?

Thanks,
Lawrence

Posted 8 months ago #
Devin
Moderator
Hi Lawrence,

Thanks for the visual, Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#top.archive.woocommerce-page .title_container {
padding-right: 0;
}
```
That should do it!

Regards,

Devin
Posted 8 months ago #
kitticraft
Member

Hi Devin,

Thank you very much, that's exactly what I was looking for...

Best regards,
Lawrence

Posted 8 months ago #
Ismael
Moderator

Hi Lawrence,

Glad that Devin helped you. :)

Cheers,
Ismael

Posted 8 months ago #