Modifying the Woocommerce template

First, we need to create this block, where price and add to cart icon are placed in one line.

We need:

  1. Copy woocommerce folder to our theme
  2. Open mytheme/woocommerce/templates/content-product.php
  3. Find hooks woocommerce_shop_loop_item_title (product title), woocommerce_after_shop_loop_item_title (price), woocommerce_after_shop_loop_item (add to cart button).
  4. Remove action woocommerce_template_loop_price from woocommerce_after_shop_loop_item_title and add it to woocommerce_after_shop_loop_item (functions.php)
  5. Modify HTML markup to place price and add to cart button into 1 line. (mytheme/woocommerce/templates/content-product.php)
  6. Modify HTML markup to change the appearance of an add_to_cart button.(mytheme/woocommerce/templates/loop/add-to-cart.php)

That’s it! Congratulations!

Iа you have any questions, feel free to ask me!

Content-product.php (part with markup):

<div class="redd">
<div class="titlee">
<?
	/**
	 * Hook: woocommerce_shop_loop_item_title.
	 *
	 * @hooked woocommerce_template_loop_product_title - 10
	 */
	do_action( 'woocommerce_shop_loop_item_title' );
?>
</div>
<div class="resti">
<?
	/**
	 * Hook: woocommerce_after_shop_loop_item_title.
	 *
	 * @hooked woocommerce_template_loop_rating - 5
	 * @hooked woocommerce_template_loop_price - 10
	 */
	do_action( 'woocommerce_after_shop_loop_item_title' );
	/**
	 * Hook: woocommerce_after_shop_loop_item.
	 *
	 * @hooked woocommerce_template_loop_product_link_close - 5
	 * @hooked woocommerce_template_loop_add_to_cart - 10
	 */
	do_action( 'woocommerce_after_shop_loop_item' );
	?>
	</div>
	
	</div>

Add-to-cart.php:

<?php
/**
 * Loop Add to Cart
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/add-to-cart.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.3.0
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
global $product;
echo apply_filters(
	'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
	sprintf(
		'<a href="%s" data-quantity="%s" class="red" %s><img src="/images/cart.svg"></a>',
		esc_url( $product->add_to_cart_url() ),
		esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
		esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
		isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
		esc_html( $product->add_to_cart_text() )
	),
	$product,
	$args
);

Functions.php:

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 ); 
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_price', 10 );
(Visited 32 times, 1 visits today)

Leave a comment

Your email address will not be published. Required fields are marked *