[Simon AParticipant]

Hi guys,

I’ve been trying to figure our how to modify layouts in WooCommerce pages, and I can’t for the life of me figure it out.

When you set up a vanilla ‘shop’ page, and then put some text on it through the ‘Pages’ area, text gets shown before the products. I’d like to move the text to appear below the shop items.

I would have expected to be able to find something in the framework/views folder, but came up empty.

I plan on modifying individual product pages too… So any advice you could provide there would be great!

I tried looking in the KB and searching the forum but couldn’t find what I was after, sorry if it’s tucked away somewhere.

[ZeshanMember]

Hi Simon,

Thanks for writing in!

Please review our KB article on Customization Best Practices. In order to customize your WooCommerce pages, you can find X WooCommerce files under wp-content/themes/x/woocommerce/ instead of “/framework/views/”.

We’d love to help you with it, but as this is a custom development, it would fall outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[Simon AParticipant]

Thanks,

I am a developer (though relatively new to WP) and have reviewed your KB article on customisation. The article doesn’t reference WooCommerce at all, instead it just insists that pretty-much everything is in /views (which got me chasing my tail). It’d be really handy if you included your advice in that article, and perhaps linked out to the WooCommerce page on customising; http://docs.woothemes.com/document/template-structure/. This would have saved me some time ;).

[Simon AParticipant]

UPDATE: For those playing along at home, I’ve hatched a solution (below).

For some reason, _stack_/woocommerce.php just wraps any woocommerce display in the woocommerce_content() function, which is a bit of a fruity function and I couldn’t figure out how to trace it. I worked around by changing the following:

OLD: /views/_stack_/woocommerce.php
<?php woocommerce_content(); ?>

NEW: /views/_stack_/woocommerce.php

<?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' );
 		}; 
?>

Credit goes to a guy here for the above: https://wordpress.org/support/topic/archive-productphp-template-overwrite-not-working . Turns out that it’s a bit of a ‘fallback’ for the function, to be used pretty much for this situation ;).

So we check if it’s a single prod, otherwise, we push to use /woocommerce/archive-product.php

Now you may notice that archive-product.php doesn’t actually exist… It doesn’t in X for some reason, but it does in a default instal of WooCommerce, so we’ll use that :).

Here’s one I had handy:
NOTE: It’s a bit ‘quick and dirty’, but I added </div> tags at appropriate intervals near the footer to prevent the sidebar and footer from breaking out. If you use a newer v. of this file, you’ll have to do the same.

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive.
 *
 * Override this template by copying it to yourtheme/woocommerce/archive-product.php
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header( 'shop' ); ?>

	<?php
		/**
		 * woocommerce_before_main_content hook
		 *
		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
		 * @hooked woocommerce_breadcrumb - 20
		 */
		do_action( 'woocommerce_before_main_content' );
	?>

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

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

		<?php endif; ?>

		<?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; ?>
		
				<?php do_action( 'woocommerce_archive_description' ); ?>

	<?php
		/**
		 * woocommerce_after_main_content hook
		 *
		 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
		 */
		do_action( 'woocommerce_after_main_content' );
	?>

</div>
	<?php
		/**
		 * woocommerce_sidebar hook
		 *
		 * @hooked woocommerce_get_sidebar - 10
		 */
		do_action( 'woocommerce_sidebar' );
	?>
	</div>
</div>
<?php get_footer( 'shop' ); ?>

Too easy 😉

[RadModerator]

That’s really cool and thanks for sharing 😉

[SermonViewParticipant]

@Simon

Been searching for hours for this issue. Every other answer on google leads to css hacks that don’t even involve the x-theme. This is the solution and thankfully I finally stumbled across. Here is the google search “x theme woocommerce product tag template customization”, hope this helps someone else. Thanks for this!

[NicoModerator]

Great to hear that! 🙂

In case you having difficulty finding threads again, feel free to ask us in a new thread so we could help you find it also.

Have a great day! 🙂

[Author]

Posts