Styling a shortcode product_categories page as the regular shop page

  • The regular WC shop page was not to my liking so I built a new page with a combination of WC shortcodes > [product_categories].

    However the output is different from the regular WC shop page. Is there any way I can have the shortcode output match the regular shop page stylings?
    I can’t find which style id’s are used on the regular shop catalog.

    P.S. I’ve made my template changes using a childtheme as it should be done. I have not made any special template overrides, just css changes.

    Regular shop catalog page: https://goo.gl/ke79j8 > correctly styled
    Shortcode catalog page: https://goo.gl/4BF6Kd > not using regular shop styles

    https://www.ads-software.com/plugins/woocommerce/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Mike Jolley

    (@mikejolley)

    Why does this question/site look familiar.. have I replied already somewhere?

    Styles in this theme are based on woocommerce-page. The new page lacks this class, so you either need to add this class to the body tag, or change the CSS to be more global.

    Thread Starter Wim

    (@utillis)

    Thanks Mike,

    no this is my first post on the forum ever. However I’ve noticed someone else has posted a similar question just before I did (but after my search).

    I’m trying to understand what the best way is to add this class to a non-woocommerce page. I’ve found some quick and dirty fixes, but I would like to find the correct way.

    I think I should somehow add my custom pages/slugs to the same is_woocommerce function which picks up the shop slug. That way I think the standard WC classes are added to the body.

    Plugin Contributor Mike Jolley

    (@mikejolley)

    Could you not just edit the CSS and where the selectors are for .woocommerce-page elements, change that for a class that is present? e.g. .page-x

    Thread Starter Wim

    (@utillis)

    That is indeed an option for the styling. As an alternative I’ve now created a new page template (copy of full-width) and added a div with class woocommerce-page within container. This way the styling works for the shortcodes in the page content.

    However I have some scripts that check if it is a woocommerce page. These don’t work as it is still not matched against the is_woocommerce function.

    Plugin Contributor Mike Jolley

    (@mikejolley)

    It is filterable so you could add some extra is_page logic there https://github.com/woothemes/woocommerce/blob/973c3d1d7ac68dab06410e3c41391bc67ba2c23f/includes/wc-conditional-functions.php#L22

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling a shortcode product_categories page as the regular shop page’ is closed to new replies.