如何将产品更改为看起来像另一个主题产品（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/

添加到购物车按钮出现在价格标签上。并且右上角有一个愿望清单按钮

这是 content-product.php 文件当前主题的 PHP 代码

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

作为一般说明 - 在对模板文件进行任何更改之前，请确保您使用的是子主题。 More information on child themes here (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;
}

1. “添加到购物车”按钮的类似内容，将其移动到悬停框 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 }
           } ?>
   

然后给css设置样式来制作一个类似的按钮。

一些一般提示：

1. 使用结合使用短代码（步骤 1）和主题功能（步骤 2）的主题时，请使用浏览器检查器找出生成的代码并找到适合主题的位置。 （例如，愿望清单只是一个简码，但您可以移动该行以移动它出现的位置。）

2. 尝试将更改与 CSS 和模板结合起来 - 大多数一些主题都已完成 80%，只需要进行一些调整（例如这个），而其他主题则需要将更多内容组合在一起。