Как изменить Product, чтобы он выглядел как другой продукт темы (content-product. php)?

Question

У меня есть клиент, который хочет внести некоторые изменения в тему woo-commerce. Я сделал много изменений, но теперь я застрял в чем-то, с чем я хочу помочь. Так что текущая тема продуктов выглядит вот так вот ссылка https://www.wpselected.com/grotte/product-category/men/shoes-briefcases-men/?shop_layout=3col

и он хочет чтобы она выглядела это, который является другой темой продукта. Вот ссылка http://negan.la-studioweb.com/

Кнопка «Добавить в корзину» появляется при наведении курсора на ценнике. и в правом углу есть кнопка wi sh -list

Вот код PHP текущей темы 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>

Answer 1

Как общее примечание - убедитесь, что вы используете дочернюю тему, прежде чем вносить какие-либо изменения в файлы шаблонов. Дополнительная информация о дочерних темах здесь (wpmudev)

1. Переместите строку короткого кода yith_wcwl_add_to_wishlist из списка .brnhmbx-hover-group-list и поместите ее просто до этого 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">
   

После этого вы можете отрегулировать стиль с помощью CSS - установить поле на относительное расположение, а затем добавить соответствующий интервал

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

Аналогично кнопке «Добавить в корзину», переместите ее после div блока 101 *

<?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 }
        } ?>

, а затем введите css, чтобы сделать кнопка аналога.

Некоторые общие советы:

1. При работе с темой, в которой используется комбинация шорткодов (шаг 1) и функций темы ( шаг 2) использовать инспектор браузера, чтобы узнать, какой код сгенерирован, и найти, куда он вписывается в тему. (Например, список желаний - это просто шорткод, но вы можете переместить эту строку, чтобы переместить туда, где она появляется.)

2. Попробуйте комбинацию изменений с CSS и шаблоном - чаще всего некоторые темы там на 80% и просто требуют нескольких настроек (как эта), другие вам нужно будет собрать гораздо больше.