Home > Software design >  How to customize WooCommerce shop page without plugins
How to customize WooCommerce shop page without plugins

Time:07-07

I'm trying to customise the shop page in WooCommerce completely, but cannot see a way to do so without the use of plugins.

I imagine that if I do not set a shop page in WooCommerce (and it's just a page with a template for example), then I would need to set up redirects from the shop page to my new store page?

What I was expecting was that I could simply override the template by copying the file into my theme (i.e. woocommerce/store.php) as I've done with other templates. However, looking into the WooCommerce plugin codebase, it looks like the entire loop folder creates the shop page (woocommerce/templates/loop).

I can simply go down the route of create a custom template (i.e. archive-shop.php) and set up the redirect if needed. But, wondering if there's a more optimal way to do this, without plugins?

In response to @hhh:

I have added "archive-product.php" to my theme (woocommerce/archive-product.php), and pasted over the original file from the woocommerce plugin.

In my copied version, I changed the header to "this is a test":

<h1 >THIS IS A TEST</h1>

I even further dismanted the file to only showcase the h1, but it does't override the default template from the plugin:

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

do_action( 'woocommerce_before_main_content' );

?>
  <header >
    <h1 >THIS IS A TEST</h1>
  </header>
<?php

get_footer( 'shop' );

enter image description here enter image description here

CodePudding user response:

In your child theme folder create a folder calle WooCommerce anmd inside a file called archive-product.php which is the shop page template file, customize it as desired.

example:

do_action('woocommerce_before_shop_loop');
echo '<h1>MOST POPULAR PRODUCTS</h1>';
do_shortcode('[products orderby="popularity"  columns="2" limit="2"]'); do_action('woocommerce_after_shop_loop');

List of default add-actions for archive page that you can unhook:

add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
 
add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
 
add_action( 'woocommerce_before_shop_loop', 'woocommerce_output_all_notices', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
 
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 ); 
 
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
 
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
 
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
 
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
 
add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
 
add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
  • Related