How to set woocommerce payment pages in Bricks style

How To
1

Hi guys,
Where can I change the size of bricks-notices-wrapper or woocommerce-notices-wrapper? Also the shoppingbasket/payment pages?
Link: https://helden-bureau.double-digits-growth.nl/

FB_IMG_1639265688619
FB_IMG_16392656886191080Ă—461 48 KB

1 Like
2

Hi Anushka,

afaik there are no Theme Style settings for this yet, but you can override the default styles with custom CSS. Just inspect the element with right-click > inspect element, check the applied classes and styles, and override them in Bricks > Settings > Custom Code > Custom CSS.

Best regards,
timmse

3

Hi Stefan,

I have tried to override the default style with custom css, but I don’t get how to paste it.
Like https://helden-bureau.double-digits-growth.nl/winkel/workshop-werken-met-het-reislogboek-kopie/ I don’t know what code i need to use to get it in shape in the bricks wrapper.

Same with these 2 pages:

I am not a developer, but I can handle basic changes, but this is way above my skills. Possible to help me with it?

4

Hi Anushka,

Sorry, I didn’t get your problem right at first sight.

The alignment of the notices wrapper is a known issue that will be solved in Bricks 1.3.7. In the meantime add this to Bricks > Settings > Custom Code > Custom CSS:

.bricks-notices-wrapper {
  background-color: #ddd;
  display: flex;
  justify-content: center;
}

.woocommerce-notices-wrapper {
  margin-bottom: 0;
  width: 87%;
  max-width: 100%;
  background-color: white;
  padding: 30px 0;
}

I think this will fit into your layout.
Don’t forget to remove it after updating to Bricks 1.3.7 because it will probably look different.

Btw., I solved your Shop-Template problem as well by assigning a condition ( Archive, Post Type & categories & tags > Product and Individual > Winkel Page) to it. You need this condition now because your blog archive is applied to “Entire Website”, so the template hierarchy uses it in the first place.

Best regards,
timmse

1 Like
5

Hi Stefan,

Thank you very much. The code works. But for the other two pages I don’t seem to get it correct when I use partial your code:

Can’t get the white part on the left and right grey. Instead of that I get a small column grey in the body part.

Do you also see on https://helden-bureau.double-digits-growth.nl/winkel/ and the product categorie pages a glitch thats shows broken image before showing images? How can that be solved and what is causing that?

Also about the Shop template, that works. Thank you for that, but now the Nieuws part is showing the shop template while it must be showing the blog archive. Can you check again?

The whole bypass that you did is because I set in the beginning on product archive template the condition on entire site because I couldn’t get the button hover correct. That’s the reason I think that you made the bypass and now the blog archive also needs a bypass. I think that we need to redo the bypasses and set the condition of product archive different. But you are the expert. Hope you can take a look and solve it again. The credentials are on my previous emails.

6

Hi Anushka,

This is because your container setup in your templates/pages is inconsistent. For example, sometimes you use an outer container + an inner container (set to 87% width), sometimes not.

I would suggest you overthink your container setup. For example, you could set the site background to light gray and the content width to 87% in theme styles, so your content will always be 87% wide, and you don’t have to set a width in each template (except for your header and footer template) or on every page.

Or you leave everything as it is and only adjust the pages where the setup differs. But then you have to think about your container setup every time you create a new page or template.

Your choice :slight_smile:

Broken Image
This is the Responsive Placeholder SVG from your LiteSpeed config. It seems like it doesn’t work.

Archive Template Conditions
They should work fine now.

Best regards,
timmse

7

Hi Stefan,

Thank you for all the information. All is now fixed, only Litespeed is left. I have sent an support message on Litespeed plugin page for help.

Thank you very much for everything!

1 Like