Align product image and title

Hi there,

Thanks for reaching out.

Can you please share the site URL with me so I can check it out?

Best,

Sure here it is

link

Thanks for looking!

Thanks for sharing the link @lsigler!

I would like to have the product title align with the right top of the product image and not above as shown in the image

Checking the product page I couldn’t be sure about where you want the title to be moved. The product title is not above the product image now. The screenshot you shared earlier is no more available now. ??

Can you please share more details about the customization you want? It will be very helpful if you take a screenshot and later and some comment/pointer to that so we can understand the request better.

Look forward to hearing from you.

https://imgur.com/a/VROP0gA

Sorry about that. I’d like to move the text down or the image up so they align.

Hello @lsigler!

The screenshot is still unavailable. ??

We recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on that page, then paste the URL in this thread.

Here it is!

https://snipboard.io/Z0gAnU.jpg

Hello @lsigler!

I’d like to move the text down or the image up so they align.

I checked your site and your requirements carefully. It appears you will need some custom PHP code(which is beyond the scope of this forum) to have the intended result. If this could be fixed with some simple CSS then we could have helped the code that you need.

The appearance of the product title and product image is controlled by the theme that you use. So, you can reach the theme’s support to get helped with this.

—

For help with custom code we recommend the WooCommerce Developer Resources Portal.

You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

Lastly, for direct assistance with code customizations, we recommend consulting with the WooCommerce Customizations Partners. https://woocommerce.com/customizations/`

Nevertheless, I’m going to leave this thread open for a bit to see if anyone is able to chime in to help you out here.

OK thanks for looking anyway!

Hi @lsigler ,

I’d like to move the text down or the image up so they align.

As mentioned, custom PHP code is required for this. The closest we can get to this is to remove woocommerce_template_single_title from its current location via an action and then re-add it back to a different location.

You can use any of the available single product page hooks here:
https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

Some basic code to help get you going:

function s0_product_change_title_position() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 20 );
}
add_action( 'init', 's0_product_change_title_position' );

Hope this helps!

• This reply was modified 2 years, 6 months ago by Roxy.

Hi @lsigler

A hook as mentioned by @roxannestoltz is a good idea for a permanent fix.

As an alternative, you can add the following CSS code to translate the image upwards so it aligns with the title:

@media (min-width:850px) {
.woocommerce-product-gallery__wrapper.product-gallery-slider.slider.slider-nav-small.mb-half.is-draggable.flickity-enabled
{
-webkit-transform: translateY(-11.5%);-ms-transform: translateY(-11.5%);transform: translateY(-11.5%)}
}

I hope that helps

Thanks for the replies! I’l try the functions in code snippets and css on Monday.

The page outlining what is what on the product page is very helpful.

Kind regards
-L

Hi @lsigler!

Thanks for the replies! I’l try the functions in code snippets and css on Monday.The page outlining what is what on the product page is very helpful.

Great! Glad you found the support needed. Please do let us know how it turns out!

Hello @lsigler!

We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

Cheers!