CODEWITHSUNDEEP
javascriptphpcsswordpresswoocommerce
Adam
Adam

Reputation: 677

How to edit woocommerce product page?

In woocommerce we can override the template by copying the woocommerce template folder into the theme - Steps are given here: LINK

What I want to is change the layout of woocommerce product page. I am not able to find what template php file to edit to change the product page layout. For example check this product page - PRODUCT PAGE

What I want to do is bring the image from left side to right side. And place the Title on the left side. Stuff like that.

But I cannot find a template php file to do that. What do i do to get this done?

Upvotes: 0

Views: 4192

Answers (2)

R.K.Bhardwaj
R.K.Bhardwaj

Reputation: 2192

Here is the way through code : plugins\woocommerce\templates\single-product\product-image.php

<div class="images">
    <?php
        if ( has_post_thumbnail() ) {
            $image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
            $image_link    = wp_get_attachment_url( get_post_thumbnail_id() );
            $image         = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
                'title' => get_the_title( get_post_thumbnail_id() )
            ) );

            $attachment_count = count( $product->get_gallery_attachment_ids() );

            if ( $attachment_count > 0 ) {
                $gallery = '[product-gallery]';
            } else {
                $gallery = '';
            }

            echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );

        } else {

            echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

        }
    ?>

    <?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>

plugins\woocommerce\templates\content-single-product.php

<div class="summary entry-summary">

        <?php
            /**
             * woocommerce_single_product_summary hook.
             *
             * @hooked woocommerce_template_single_title - 5
             * @hooked woocommerce_template_single_rating - 10
             * @hooked woocommerce_template_single_price - 10
             * @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
             */
            do_action( 'woocommerce_single_product_summary' );
        ?>

    </div><!-- .summary -->

Upvotes: 0

R.K.Bhardwaj
R.K.Bhardwaj

Reputation: 2192

You need to go woocommerce\templates directory and make changes into content-single-product.php or single product folder. otherwise use this CSS

.images { 
float: right !important;
    }

Upvotes: 2

Related Questions