Question

目前，我的Woocommerce产品页面在我的描述的最底部有一排社交媒体共享图标。在研究明星的指导下，我已经进行了足够的研究，以学习如何将其提升到更高的位置。

然而，我想做的是将它放在恒星的同一直线和右边。有更多精通PHP的人可以帮我解决这个问题吗？

感谢您的时间！

以下是我正在尝试做的图片：

http://mommylovestea.com/wp-content/uploads/2014/08/product-page.jpg

这是我目前的php的副本。这是一个运行WooCommerce插件的Wordpress网站。请让我知道我还需要提供什么，我会尽力去做。

 <?php

    /**
     * The template for displaying lookbook product style content within loops.
     *
     * Override this template by copying it to yourtheme/woocommerce/content-product.php
     *
     * @author      WooThemes
     * @package     WooCommerce/Templates
     * @version     1.6.4
     */


    global $post, $product, $flatsome_opt;

    // Get category permalink
    $permalinks     = get_option( 'woocommerce_permalinks' );
    $category_slug  = empty( $permalinks['category_base'] ) ? _x( 'product-category', 'slug', 'woocommerce' ) : $permalinks['category_base'];

?>

<div itemscope itemtype="http://schema.org/Product" id="product-<?php the_ID(); ?>" <?php post_class(); ?>> 

<div class="row">    
        <?php
            /**
             * woocommerce_before_single_product hook
             *
             * @hooked woocommerce_show_messages - 10
             */
             do_action( 'woocommerce_before_single_product' );
        ?>    
        <div class="large-6 columns product-gallery">        

            <?php
                /**
                 * woocommerce_show_product_images hook
                 *
                 * @hooked woocommerce_show_product_sale_flash - 10
                 * @hooked woocommerce_show_product_images - 20
                 */
                do_action( 'woocommerce_before_single_product_summary' );
            ?>

        </div><!-- end large-6 - product-gallery -->

        <div class="product-info large-6 small-12 columns left">
                <?php
                    /**
                     * woocommerce_single_product_summary hook
                     *
                     * @hooked woocommerce_template_single_title - 5
                     * @hooked woocommerce_template_single_price - 10
                     * @hooked ProductShowReviews() (inc/template-tags.php) - 15
                     * @hooked woocommerce_template_single_excerpt - 20
                     * @hooked woocommerce_template_single_add_to_cart - 30
                     * @hooked woocommerce_template_single_meta - 40
             * @hooked woocommerce_template_single_sharing - 50
                     */

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 15 );


                    do_action( 'woocommerce_single_product_summary' );
                ?>

        </div><!-- end product-info large-4 -->

<div class="product-page-aside large-2 small-12 columns text-center hide-for-small">

    <div class="next-prev-nav">
        <?php // edit this in inc/template-tags.php // ?>
        <?php next_post_link_product('%link', 'icon-angle-left next', true); ?>
        <?php previous_post_link_product('%link', 'icon-angle-right prev', true); ?>
    </div>

     <?php  woocommerce_get_template('single-product/up-sells.php');?> 

</div><!-- .product-page-aside -->


</div><!-- end row -->


<?php
    //Get the Thumbnail URL for pintrest
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), false, '' );
?>



<div class="row">
    <div class="large-12 columns">
        <div class="product-details <?php echo $flatsome_opt['product_display']; ?>-style">
               <div class="row">

                    <div class="large-12 columns ">
                    <?php woocommerce_get_template('single-product/tabs/tabs.php'); ?>
                    </div><!-- .large-9 -->

               </div><!-- .row -->
        </div><!-- .product-details-->

        <hr/><!-- divider -->
    </div><!-- .large-12 -->
</div><!-- .row -->


    <div class="related-product">
        <?php
            /**
             * woocommerce_after_single_product_summary hook
             *
             * @hooked woocommerce_output_related_products - 20
             */

            do_action( 'woocommerce_after_single_product_summary' );

        ?>
    </div><!-- related products -->

</div><!-- #product-<?php the_ID(); ?> -->

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

Answer 1

添加以下样式应该有效：

.scroll-to-reviews
{
    float: left;
}

.social-icons.share-row
{
    float: right !important;
    padding-top: 0;
}

.short-description
{
    clear: both;
}

更改Wordpress WooCommerce产品页面布局

1 个答案: