Woocommerce shop styling doesn't look right

[JacoV80]

Hi there,

www.bambianddaisy.co.za

Maybe I on the complete wrong track but the styling of the woocommerce part of my site is looking completely wrong/different.

I am not able to edit product page with Pro.

On the menu the arrows (and search magnifying glass icon) doesn’t show right, it shows a square.

Please assist.

[ruenel]

Hello Jaco,

Thanks for writing in! It seems that you haven’t assigned a page as your Shop index. You can assign a page in WooCommerce > Settings > Products > General > Shop Pages. I also noticed that you have added a custom CSS that removes the margin of the container which is why the content moves to the left side. You have added this:

.x-container.offset {
    margin: 0px;
}

You should remove that CSS code because it is creating a conflict with the WooCommerce pages. If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[marc_a]

Hi @JacoV80,

If you want to style your Woocommerce shop page, I advise you to use the global blocks and add the shortcode on your shop page because when you set the product shop page on the WooCommerce > Settings > Products > General > Shop Pages, you can’t use the Pro editor on the page.

On the other hand, I don’t see any search icon on your website. Can you please tell us where the search icon located?

Hope that helps and let us know how it goes.

Thank you.

[JacoV80]

Hi guys,

Thanks for the reply, but I am confused now. First you tell me to go and assign a page as my shop index, then in the next post you advise that you should not set the shop index because then you won’t be able to edit the page with Pro editor?

In short, I want to edit shop page and product pages in Pro editor. How do I do that?

The search icon had an issue when I used standard header features under Theme Options. In the meantime I have created my own header and all is well thanks.

[tristup]

Hi Jaco,

Sorry for the confussion, you need to assign a page as Shop Index page from WooCommerce > Settings > Products > General > Shop Pages to show that as a shop page.
The Shop page is a WooCommerce reserved page and rendered with the specific shortcode and contents. Currently, it’s not recommended to edit WooCommerce reserved pages through the builder due to hook conflict.
I would recommend using the standard editor (WordPress editor) for Woocommerce reserved pages.

And as suggested by Marc you can add the Global Blocks as a shortcode in your shop page, while editing it in WordPress editor. You can get more information on Global Blocks and how it can be used as shortcode here: https://theme.co/docs/global-blocks#how-to-use-a-global-block

Hope it helps.
Thanks

[JacoV80]

Thanks for the reply, I did assign a Shop Index page but the styling is not at all in line with the rest of the theme.

And Product Pages, can I edit those with Pro editor?

[tristup]

Hi Jaco,

I have checked your site and found that the Shop Page is still not assigned to WooCommerce > Settings > Products > General > Shop Pages, whereas I find the Shop page in your page trash list.
I would suggest you restore and set the Shop Page and select the Show Products in place of Show Categories from Appearance > Customize > WooCommerce > Product Catelog.

Please find the screenshot describing the settings.

Hope it helps.
Thanks

[JacoV80]

Hi there,

Thanks once again. I restored the shop page (was playing around to try things and didn’t restore it before you had a look). This is how it looks now, and it is not looking good:

Okay so if I understand you correctly I cannot edit this with Pro editor. Thus I have to create a new Shop page with Wordpress editor and insert the Woocommerce blocks etc. as I would want and then set this page as the new Shop page?

Secondly if I want to edit a Product Page, everything is blank:

Maybe I have misunderstood the capabilities of Pro?

[nabeel]

Hey Jaco,

Just like the blog and archive pages you can not edit the shop page in any content builder. Because it is using a special template.

If you want your shop page to be editable in Cornerstone/Content builder, please do not set it as Shop page in Woocomerce > Settings > Display. Then use the Woocommerce shortcodes for displaying your products. You can paste your shortcodes into a RAW Content element.

When editing a product page using Cornerstone/Content builder, you can only edit the product description area and not the whole product page layout. The product page layout is utilizing the WooCommerce templating system which lay out the structure in displaying the product image on the left, product summary on the right and the rest of the product description at the bottom.

Hope this helps!

[JacoV80]

Thanks Nabeel I understand, I will try it out!

[tristup]

Hi Jaco,

Please let us know how it works for you.

Thanks