Styling issues with WooCommerce/Kadence Blocks/Kadence Theme

  • Hi Ben,

    I have come across some bugs which seem to be an issue when WooCommerce is installed. If you edit the WooCommerce shop page and add a hero section which uses a shape divider, the shape divider itself works fine and is visible when you are editing the page but when you view the page on the front end of the site, the divider will not take up the full width and it’s colour reverts to “black” regardless of what has been set in the editor. I am also finding this same colour issue with icons. The colour does not reflect what was set and reverts to being black or cannot be seen. I think this must be a new bug as I made a site a few months ago where everything was working fine on the WooCommerce shop page but now these issues have appeared with the hero which works fine on all other non-WooCommerce pages.

    I have tried a fresh install with Kadence Theme, Kadence Blocks and WooCommerce using Local where I imported from the Kadence design library the very first hero section which uses a shape divider (“Create amazing content with Gutenberg”) and it reproduced the same issue. I can only therefore assume this must be a bug related to WooCommerce as the hero with a shape divider and icons all work fine on other pages which are not WooCommerce related. Could you have a look at this? I have uploaded a couple of screen shots which you can view using this link https://postimg.cc/gallery/n9bQvdT.

    Thanks!

    Mark

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi,
    The woocommerce shop page is not a “page” in the normal sense. It’s an archive of products and it only shows the “description” output similar to a description of an archive. It’s not accurate to think of the content in your shop page as being page content. It doesn’t get output as page content and instead it gets filtered and limited intentionally by woocommerce.

    https://github.com/woocommerce/woocommerce/blob/trunk/includes/wc-template-functions.php#L1309

    Perhaps I could add a feature to prevent woocommerce core handling of the content. I do offer an option to disable the woocommerce content entirely in Kadence Pro and let you built a custom page with blocks instead, including woocommerce blocks.

    Anyway just wanted to clarify this isn’t anything new, woocommerce filters the way the HTML gets output on the shop page and it breaks the svgs and other inline HTML.

    Ben

    Thread Starter mjs1974

    (@mjs1974)

    Hi Ben,

    I completely understand about WooCommerce being it’s own custom post type and that the shop page is an archive with it’s own page template making it different to “posts” and “pages”. It was just odd that this worked fine a month or two ago in WordPress 5.7.2 with WooCommerce 5.1.0, Kadence Blocks 1.10.7 and Kadence 1.0.19 as the only thing I am doing is adding a hero section containing a heading, text, an icon and shape divider which is technically before the actual WooCommerce products loop which outputs the products onto the page (I am not doing or require any other customisations which need a custom design to override anything else outputted onto the page by WooCommerce).

    Is there any possible code fix to correct this or is the only solution (unless you make an update) to just use the Kadence Theme page customiser settings in the same way you set the shop archive page in the shop demo https://demos.kadencewp.com/blocks-store/shop/? It would be a shame if the latter is the only option as it would break away from the hero design I have used on the other pages of the site which use the shape divider.

    Thanks,

    Mark

    I’m going to push out an update tomorrow which will change this from the default way woocommerce handles the shop page. There will be a filter to disable this change but for now, I can’t think of a good reason to be filtering the HTML on that page when no other page gets the HTML filtered.

    Ben

    Thread Starter mjs1974

    (@mjs1974)

    Thanks a lot for this Ben. All is working again with the divider and the icon on the shop page. I appreciate your help.

    Cheers,

    Mark

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling issues with WooCommerce/Kadence Blocks/Kadence Theme’ is closed to new replies.