[Resolved] Shop Page Layout

[Hugo]

Hi Tom.

I want display the shop page like this link https://globalcscorp.com/astra/catalogo/

The sidebar has a line from the top to the bottom of the page
The search widget buttom is beside de text box, not below.
And the page is fullwidth

I try to do that in GP, but i didnt find a way to add the line. The buttom of the widget is below and the page its not ful width

You can see the diference in this link https://globalcscorp.com/sian/catalogo/

Thanks for your help a lot

[David]

Hi there,

we can add a border to the content area instead, and use a little bit of flex to align the search:

.left-sidebar .content-area {
    border-left: 1px solid;
}

.woocommerce-product-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

[Hugo]

Thanks David
It works.

But now, i need some padding between the border of the side bar and the content of the shop

I use this css code
.site-main .inside-article .entry-content{
padding-left: 60px;
}

But the padding is aplied to the all site, and i need only in the woocommerce pages

The link of the site: https://globalcscorp.com/sian/catalogo/

Thanks a lot.

[Leo]

Try target the WooCommerce page only with your CSS:

.woocommerce-page .site-main .inside-article .entry-content{
    padding-left: 60px;
}

[Hugo]

Thanks Leo. It Works.

[Leo]

No problem 🙂

[Hugo]

Leo, its me again jejejje. But i need the padding for the cart page too. Can you help?

Thanks

[Leo]

Can you try the edited CSS?
https://generatepress.com/forums/topic/shop-page-layout/#post-627898

[Author]

Posts