Woocommerce Shop Page Customization

Support
#1

How do we customize the appearance of Woocommerce’s shop page? Apparently, putting a copy of archive-template.php in my child theme will not work for this particular page. Woocommerce says

Gotcha: If your theme has a woocommerce.php file, you will be unable to override the woocommerce/archive-product.php custom template in your theme, as woocommerce.php has priority over other template files. This is intended to prevent display issues.

I’m simply trying to wrap the output of woocommerce_content() with a div class=“entry-wrap”. I was able to achieve this by editing x-child/framework/views/integrity/woocommerce.php but it affects all woocommerce pages.

I’m also trying to add some body classes to the shop page, but the body class field in the page editor does not work either.

Setting a Page Designed in Cornerstone to Be Shop page
#2

Hey there,

You can override the woocommerce_content function for this case and use WooCommerce conditional tags to apply on certain pages only.

The body class page setting won’t work because the shop page is a special page powered by WooCommerce. To add a body class, you need to use the body_class function inside a WooCommerce conditional tag.

If you’re unsure how to do this, we do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thanks.

#3

Custom development shouldn’t be required for standard features that are available to every single other page, even woocommerce pages. You should provide a free workaround for this oversight.

#4

Hello There,

Thanks for updating in!

1.)To resolve your issue and add “entry-wrap” only in the shop page, you can add a condition out of it. For example contents of the wp-content/themes/x-child/framework/views/{your-stack}/woocommerce.php file:

<?php

// =============================================================================
// VIEWS/INTEGRITY/WOOCOMMERCE.PHP
// -----------------------------------------------------------------------------
// WooCommerce page output for Integrity.
// =============================================================================

?>

<?php get_header(); ?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php if ( is_shop() ) : ?>
      	<div class="entry-wrap">
      <?php endif; ?>

      <?php woocommerce_content(); ?>

      <?php if ( is_shop() ) : ?>
      	</div>
      <?php endif; ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

I am using Integrity stack as an example. You may use this as a guide on how you can add a conditional div tag only in the shop page.

2.) For the custom shop page class, you can do this by editing your shop page and find the Page Settings > Body CSS Classes.

And then this code in your child theme’s functions.php to make sure that the body class will get reflected to the page output.

// Display Body CSS classes in the shop page
// =============================================================================
function my_custom_class($output){
  if( is_shop() ) {
    $shopID = get_option( 'woocommerce_shop_page_id' );
    $custom_class = get_post_meta( $shopID, '_x_entry_body_css_class', true );
    $output[] = $custom_class;
  }

  return $output;
}
add_filter( 'body_class', 'my_custom_class' );
// =============================================================================

Hope this helps. Please let us know how it goes.

#5

It’s very effective!

#6

Glad we could help.

Cheers!

#7

Can you provide a similar solution for the Disable Page Title checkbox to be honored?

#8

Hi there,

We can’t provide any further customization regarding this as this is more related to settings and landmark. But, if you just wish to hide it then you can simply do it with CSS, example, you can add this to your global custom CSS.

.my-shop-class .x-landmark {
display: none;
}

Hope this helps.

#9

That will suffice.

What is landmark?

#10

Hi there,

The landmark area is the container for the large titles for the index pages such as the shop and blog.

Hope this helps.