How to change Product to look like another theme product (content-product.php)?

Question

I have a client who wants to do some customization in woo-commerce theme. I did many of the changes but now i am stuck at something that i want help with. So the current theme products look like this here is the link https://www.wpselected.com/grotte/product-category/men/shoes-briefcases-men/?shop_layout=3col

and he wants to it to look like this, which is another themes product view Here is the link http://negan.la-studioweb.com/

The add to cart button appears on hover on the price tag. and there is a wish-list button at the right corner

Here is the PHP code of current theme of content-product.php file

<?php
/**
 * The template for displaying product content within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-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     http://docs.woothemes.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 3.6.0
 */

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

global $product, $post;

// Ensure visibility
if ( ! $product || ! $product->is_visible() ) {
    return;
}

?>
<li <?php post_class(); ?>>

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

    <div class="brnhmbx-hover-group-container">
        <a href="<?php esc_url( the_permalink() ); ?>">

            <?php
                /**
                 * woocommerce_before_shop_loop_item_title hook
                 *
                 * @hooked woocommerce_show_product_loop_sale_flash - 10
                 * @hooked woocommerce_template_loop_product_thumbnail - 10
                 */
                do_action( 'woocommerce_before_shop_loop_item_title' );

            ?></a>

            <div class="brnhmbx-hover-group">
                <?php if ( shortcode_exists( 'yith_wcwl_add_to_wishlist' ) ) { echo do_shortcode( '[yith_wcwl_add_to_wishlist]' ); } ?>
                <div class="brnhmbx-product-id"><?php echo get_the_ID(); ?></div>
                <?php if ( function_exists( 'yith_wcqv_init' ) && get_option( 'yith-wcqv-enable' ) == 'yes' ) { ?><div class="brnhmbx-button ico-view"><i class="fa fa-search"></i></div><?php } ?>
                <?php if ( get_theme_mod( 'brnhmbx_enableBFM', 1 ) ) {

                    if ( shortcode_exists( 'yith_wcwl_add_to_wishlist' ) || ( function_exists( 'yith_wcqv_init' ) && get_option( 'yith-wcqv-enable' ) == 'yes' ) ) { ?>

                        <div class="brnhmbx-button ico-gift brnhmbx-bfm"><i class="fa fa-gift"></i></div>

                    <?php } else { ?>

                        <div class="brnhmbx-button b170 clearfix ico-gift brnhmbx-bfm"><div><?php echo esc_attr( get_theme_mod( 'brnhmbx_tra_BFM_Header', 'BUY FOR ME' ) ); ?></div><i class="fa fa-gift"></i></div>

                    <?php }

                } ?>

                <?php if ( get_theme_mod( 'brnhmbx_enableCatalogMode', 0 ) ) { ?>

                    <a href="<?php esc_url( the_permalink() ); ?>"><div class="brnhmbx-button b170 ico-add-to-cart"><div><?php echo esc_attr( get_theme_mod( 'brnhmbx_catalogButtonText', 'VIEW PRODUCT' ) ); ?></div><div style="display: none;"><?php echo get_the_ID(); ?></div><i class="fa fa-angle-right"></i></div></a>

                <?php } else {

                    if ( !in_array( $product->get_type(), array( 'variable', 'grouped', 'external' ) ) && $product->is_purchasable() && $product->is_in_stock() ) { ?>

                        <button type="submit" data-quantity="1" data-product_sku="<?php echo esc_attr( $product->get_sku() ); ?>" data-product_id="<?php echo esc_attr( $product->get_id() ); ?>" class="add_to_cart_button product_type_simple ttbutton secondary add-to-cart-grid single_add_to_cart_button button alt brnhmbx-button b170 ajax_add_to_cart"><span><?php echo wp_kses_post( $product->single_add_to_cart_text() ); ?></span></button>

                    <?php } else { ?>

                        <a href="<?php esc_url( the_permalink() ); ?>"><div class="brnhmbx-button b170 ico-add-to-cart"><div><?php echo wp_kses_post( $product->add_to_cart_text() ); ?></div><div style="display: none;"><?php echo get_the_ID(); ?></div><i class="fa fa-angle-right"></i></div></a>

                    <?php }

                } ?>

            </div>

    </div>

    <h3><a href="<?php esc_url( the_permalink() ); ?>"><?php the_title(); ?></a></h3>
    <div class="brnhmbx-product-cat"><?php echo wc_get_product_category_list( $product->get_id() ); ?></div>

    <?php

    /**
     * woocommerce_shop_loop_item_title hook
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
    //'woocommerce_shop_loop_item_title' hook has been removed.

    /**
     * woocommerce_after_shop_loop_item_title hook
     *
     * @hooked woocommerce_template_loop_rating - 5
     * @hooked woocommerce_template_loop_price - 10
     */
    do_action( 'woocommerce_after_shop_loop_item_title' );

    ?>

    <div class="brnhmbx-summary-outer">
        <?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ); ?>
        <div class="brnhmbx-hover-group-list-top-margin"></div>
        <div class="brnhmbx-hover-group-list">
            <?php if ( shortcode_exists( 'yith_wcwl_add_to_wishlist' ) ) { echo do_shortcode( '[yith_wcwl_add_to_wishlist]' ); } ?>
            <div class="brnhmbx-product-id"><?php echo get_the_ID(); ?></div>
            <?php if ( function_exists( 'yith_wcqv_init' ) && get_option( 'yith-wcqv-enable' ) == 'yes' ) { ?><div class="brnhmbx-button ico-view"><i class="fa fa-search"></i></div><?php } ?>
            <?php if ( get_theme_mod( 'brnhmbx_enableBFM', 1 ) ) {

                if ( shortcode_exists( 'yith_wcwl_add_to_wishlist' ) || ( function_exists( 'yith_wcqv_init' ) && get_option( 'yith-wcqv-enable' ) == 'yes' ) ) { ?>

                    <div class="brnhmbx-button ico-gift brnhmbx-bfm"><i class="fa fa-gift"></i></div>

                <?php } else { ?>

                    <div class="brnhmbx-button b170 clearfix ico-gift brnhmbx-bfm"><div><?php echo esc_attr( get_theme_mod( 'brnhmbx_tra_BFM_Header', 'BUY FOR ME' ) ); ?></div><i class="fa fa-gift"></i></div>

                <?php }

            } ?>

            <?php if ( get_theme_mod( 'brnhmbx_enableCatalogMode', 0 ) ) { ?>

                    <a href="<?php esc_url( the_permalink() ); ?>"><div class="brnhmbx-button b170 ico-add-to-cart"><div><?php echo esc_attr( get_theme_mod( 'brnhmbx_catalogButtonText', 'VIEW PRODUCT' ) ); ?></div><div style="display: none;"><?php echo get_the_ID(); ?></div><i class="fa fa-angle-right"></i></div></a>

            <?php } else {

                    if ( !in_array( $product->get_type(), array( 'variable', 'grouped', 'external' ) ) && $product->is_purchasable() && $product->is_in_stock() ) { ?>

                        <button type="submit" data-quantity="1" data-product_sku="<?php echo esc_attr( $product->get_sku() ); ?>" data-product_id="<?php echo esc_attr( $product->get_id() ); ?>" class="add_to_cart_button product_type_simple ttbutton secondary add-to-cart-grid single_add_to_cart_button button alt brnhmbx-button b170 ajax_add_to_cart"><span><?php echo wp_kses_post( $product->single_add_to_cart_text() ); ?></span></button>

                    <?php } else { ?>

                        <a href="<?php esc_url( the_permalink() ); ?>"><div class="brnhmbx-button b170 ico-add-to-cart"><div><?php echo wp_kses_post( $product->add_to_cart_text() ); ?></div><div style="display: none;"><?php echo get_the_ID(); ?></div><i class="fa fa-angle-right"></i></div></a>

                <?php }

            } ?>

        </div>
    </div>

    <?php

        /**
         * woocommerce_after_shop_loop_item hook
         *
         * @hooked woocommerce_template_loop_add_to_cart - 10
         */
        //'woocommerce_after_shop_loop_item' hook has been removed.

    ?>

</li>

Mathias Everson Mathias Everson · Accepted Answer · 2020-01-27T09:40:24

As a general note - make sure that you're using a child theme before making any changes to template files. More information on child themes here (wpmudev)

Move the yith_wcwl_add_to_wishlist shortcode line out of the .brnhmbx-hover-group-list, and place it just before that div.

<div class="brnhmbx-hover-group-container">
    <a href="<?php esc_url( the_permalink() ); ?>">
    <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );

    ?></a>
    <?php if ( shortcode_exists( 'yith_wcwl_add_to_wishlist' ) ) { echo do_shortcode( '[yith_wcwl_add_to_wishlist]' ); } ?>

    <div class="brnhmbx-hover-group">

After this, you can adjust the styling via CSS - set the box to relative positioning and then add the appropriate spacing

.yith-wcwl-add-to-wishlist {
    display: block;
    position: absolute;
    top: 20px !important;
    right: 10px;
}

Similar thing for the 'Add to Cart' button, move this to after the hover box div

<?php if ( get_theme_mod( 'brnhmbx_enableCatalogMode', 0 ) ) { ?>
            <a href="<?php esc_url( the_permalink() ); ?>"><div class="brnhmbx-button b170 ico-add-to-cart"><div><?php echo esc_attr( get_theme_mod( 'brnhmbx_catalogButtonText', 'VIEW PRODUCT' ) ); ?></div><div style="display: none;"><?php echo get_the_ID(); ?></div><i class="fa fa-angle-right"></i></div></a>
        <?php } else {
            if ( !in_array( $product->get_type(), array( 'variable', 'grouped', 'external' ) ) && $product->is_purchasable() && $product->is_in_stock() ) { ?>
                <button type="submit" data-quantity="1" data-product_sku="<?php echo esc_attr( $product->get_sku() ); ?>" data-product_id="<?php echo esc_attr( $product->get_id() ); ?>" class="add_to_cart_button product_type_simple ttbutton secondary add-to-cart-grid single_add_to_cart_button button alt brnhmbx-button b170 ajax_add_to_cart"><span><?php echo wp_kses_post( $product->single_add_to_cart_text() ); ?></span></button>
            <?php } else { ?>
                <a href="<?php esc_url( the_permalink() ); ?>"><div class="brnhmbx-button b170 ico-add-to-cart"><div><?php echo wp_kses_post( $product->add_to_cart_text() ); ?></div><div style="display: none;"><?php echo get_the_ID(); ?></div><i class="fa fa-angle-right"></i></div></a>
            <?php }
        } ?>

and then style the css to make a similar button.

Some general tips:

When working with a theme that uses a combination of shortcodes (step 1) and theme functions (step 2) use your browser inspector to find out what code is generated and find where that fits into the theme. (For example, the wishlist is just a shortcode, but you can move that line to move where it appears.)
Try a combination of changes with CSS and the template - most some themes are 80% there and just require a few tweaks (like this one) others you'll need to put a lot more together.

How to change Product to look like another theme product (content-product.php)?

1 Answers