如何将产品更改为另一个主题产品（content-product.php）？

时间：2020-01-27 08:26:49

标签： php wordpress woocommerce hook-woocommerce woocommerce-theming

我有一个客户想要对woo-commerce主题进行一些自定义。我做了很多更改，但是现在我陷入了需要帮助的地方。 因此，当前的主题产品如下所示，是链接https://www.wpselected.com/grotte/product-category/men/shoes-briefcases-men/?shop_layout=3col

Current theme products

他希望它看起来像这样，这是另一个主题产品视图 这是链接http://negan.la-studioweb.com/

enter image description here

“添加到购物车”按钮显示在价格标签的悬停上。右上角有一个愿望清单按钮

这是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>

1 个答案:

答案 0 :(得分：0)

作为一般说明-在对模板文件进行任何更改之前，请确保您正在使用子主题。 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. 尝试将CS​​S和模板的更改组合在一起-大部分主题在这里占80％，只需要做一些调整（像这样），其他则需要更多。

相关问题
最新问题