Archived topic

Shop Page Layout

7 replies · Started by Hugo on July 17, 2018

Viewing posts 1–8 of 8

July 17, 2018 at 9:11 pm #626247

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

July 18, 2018 at 5:01 am #626457

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;
}

July 19, 2018 at 1:27 pm #627871

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.

July 19, 2018 at 2:01 pm #627898

Try target the WooCommerce page only with your CSS:

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

July 22, 2018 at 5:20 pm #630186

Thanks Leo. It Works.

July 22, 2018 at 6:17 pm #630211

No problem :)

July 22, 2018 at 7:48 pm #630247

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

Thanks

July 22, 2018 at 8:42 pm #630269

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

This archived topic is closed to new replies.

Start building better websites today.