Customize shop page (WooCommerce)

[bassjobsen]

Question by: cjit john (Calvin)

How can I customize the page for shop?

[bassjobsen]

Hi Calvin,

Good question. The theme should be WooCommerce ready. In fact i expect at least normal WooCommerce template overwriting, as describe on http://docs.woothemes.com/document/template-structure/,should work. JBST implements http://docs.woothemes.com/document/third-party-custom-theme-compatibility/

Unfortunately i found the above don't work. (since woocommerce version 2.1?) Also described here: http://wordpress.org/support/topic/archive-productphp-template-overwrite-not-working

In the next update i will add the code shown below as a quick fix to woocommerce.php:

if ( is_singular( 'product' ) ) {
     woocommerce_content();
  }else{
   //For ANY product archive.
   //Product taxonomy, product search or /shop landing
    woocommerce_get_template( 'archive-product.php' );
  }

After this fix you can overwrite woocommerce's archive-product.php tempate by adding a file with the same name to wp-content/themes/(your_theme)/woocommerce/archive-product.php. Hope this help you for now.

Note your archive-product.php can look like shown below:

    <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

        <h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

    <?php endif; ?>

    <?php do_action( 'woocommerce_archive_description' ); ?>

    <?php if ( have_posts() ) : ?>

        <?php
            /**
             * woocommerce_before_shop_loop hook
             *
             * @hooked woocommerce_result_count - 20
             * @hooked woocommerce_catalog_ordering - 30
             */
            do_action( 'woocommerce_before_shop_loop' );
        ?>

        <?php woocommerce_product_loop_start(); ?>

            <?php woocommerce_product_subcategories(); ?>

            <?php while ( have_posts() ) : the_post(); ?>

                <?php wc_get_template_part( 'content', 'product' ); ?>

            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>

        <?php
            /**
             * woocommerce_after_shop_loop hook
             *
             * @hooked woocommerce_pagination - 10
             */
            do_action( 'woocommerce_after_shop_loop' );
        ?>

    <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

        <?php wc_get_template( 'loop/no-products-found.php' ); ?>

    <?php endif; ?>

How to use and overwrite other templates of woocommerce asks for further investigation.

In the case you use WooCommerce Twitter's Bootstrap Plugin (recommended!!) you can overwrite the product archive page as describe above. To overwrite the plugin's bs-content-product.php and placeholder.php tempates you have add a file with the same name to wp-content/themes/(your_theme)/woocommerce-twitterbootstrap/

[bassjobsen]

Question by: cjit john (Calvin)

How can I customize the product page I'm using the shortcode to display sale Items?

[bassjobsen]

Hi Calvin,

Since the last update, you should be able to use WooCommerce template overwriting, as describe on http://docs.woothemes.com/document/template-structure/.

For the product page you should create wp-content/themes/{child_theme}/woocommerce/content-single-product.php (which should be a copy of wp-content/plugins/woocommerce/templates/content-single-product.php ). Please let me know if this helps?

I not sure how that shortcode works? Can you show an example? Note: For themes developed for sale on http://themes.jbst.eu/. These theme should be full function after activation. Also this themes should not bundle https://github.com/bassjobsen/woocommerce-twitterbootstrap although they can recommend it.

Best regards,

Bass

[Cordova-1]

Might these video tutorial by Brandon Brotsky help you - - >

https://www.brotsky.tv/2013/10/08/woocommerce-editing-shop-template-page/

[ActionScripted]

@bassjobsen: thanks for the override suggestion using a conditional in woocommerce.php! As of WooCommerce 2.4.12 this still seems to be the way to go.

[NeftaliAcosta]

Hi, I need help, I dont know how to modify this template (archive-product.php) to create this structure:

http://i.stack.imgur.com/5b3aT.png

Can you help me please? :(

[testerimax]

@NeftaliAcosta #126

[NeftaliAcosta]

@testerimax thanks