How to separate the product’s title with the product picture.

Hi @jenghei ??

Currently I wanted to separate my product picture and my product’s title to left and right, but I’m not sure how to do it.

This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
?

/* Change positioning for product's images and title */
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: right !important;
}

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    float: left !important;
}

Results:

https://www.screencast.com/t/xVy7m22wTIns
?
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

I wanted to add some product description into it, could it be done?

And for this, you can add a description for any of your products by going to WordPress Dashboard > Products > All Products > Select the product. From there, add the description in the text field that displays under the Add Media button, as demonstrated in the screenshot below:

https://www.screencast.com/t/8B9WX2Ui

Hi @gabrielfuentes

I have followed your custom CSS but there is nothing happened there, but I insert this custom code inside the function.php, it works and separated into up and down. But how do I move to the right side for the title and the price?

remove_action( ‘woocommerce_shop_loop_item_title’, ‘woocommerce_template_loop_product_title’, 10 );
add_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_title’, 9 );

Hi @jenghei

I’ve checked your site and I can see that the code worked for you.

Oftentimes something like this can be affected by your browser’s cache. I would suggest that you try clearing the cache/cookies and then try it again. You could also try from a different browser or device.

Here is a support page that can walk you through that: https://en.support.wordpress.com/browser-issues/#clearing-your-browser-cache

Cheers!

Hi @gabrielfuentes

For the single product preview is showing as you provide the sample but I wanted to change all the title and price at the shop side. Means I could see all the product in a page but the title and price at right side.
Link below will be my shop link
[ redundant link removed ]

Thank you.

• This reply was modified 3 years, 4 months ago by Jan Dembowski.

Hi @jenghei

For the single product preview is showing as you provide the sample but I wanted to change all the title and price at the shop side. Means I could see all the product in a page but the title and price at right side.

It seems that would require some customization, we highly recommend contacting one of the services on our WooCommerce Customizations Page.

I trust that points you in the right direction, but if you have more questions, let us know.