Dynamic attribute value in title or header
-
Hey Aizaz, I appreciate all of your help so far. Can you help me with giving me your opinion on how to achieve this? I use elementor pro…..I need to display the size attribute name after the product name (47 MM) in the attached image.
I also need to display the color attribute value bellow the product title, it should change depending on the attributes you click on. I tried custom fields but I am not getting the value when clicking the attribute.
How would you do this? I appreciate your help very much thank you!
Attachments:
You must be
logged in to view attached files.
Hello,
Currently, there’s no direct option in the theme settings to show the attribute name immediately after the product title.
However, you can achieve this by enabling the built-in option for variable products:
Go to Theme Settings > Shop > Variable Product and enable “Show selected option name on desktop and tablet”
.
This will display the selected attribute (like size) on the product page above the variation.
Best Regards,
Thank you, I know there’s no direct option in the theme.
If you were using elementor, elementor pro and woodmart theme in your personal website, how would you try to do this? Do you think it is possible using elementor pro?
I am just not sure how to insert a dynamic attribute tag to a text widget. Just asking you for advice outside of woodmart but I understand if you can’t.
Hello,
Please follow this video guide and configure it up: https://shorturl.at/gF9bh
Hope this Helps!
Best Regards,
Hey Aizaz, I couldn’t configure this. Can you please help me figure out how to do this? I am adding two websites in the private section explaining it in detail.
Hello,
Navigate to Theme Settings > Custom JS > Add the following code and check how it works.
jQuery( document ).ready( function( $ ) {
var title_text = $( '.product-type-variable .product_title' ).text(); // get default title
function add_variation_txt_to_title() {
var new_title_text = '';
$( '.variations select' ).each( function() {
new_title_text += ' ' + $( this ).find( ':selected' ).val(); // collect all variation selected <options>
})
$( '.product-type-variable .product_title' ).text( title_text + new_title_text ); // set new title
}
add_variation_txt_to_title(); // call on load
$( '.variations select' ).change( function() { // call on <select >change
add_variation_txt_to_title();
})
})
Best Regards,
Thank you so much Aizaz, this seems to work great for the product title.
https://stg-2te7dt.elementor.cloud/product/venu-4/
However, I need to add a text line below the product title to show the color variation only. The size variation is not that important. The thing now is how can I add a selector below the product title to point the JS code you sent me?
Right now it looks like it’s pulling the slug and not the variation name. What do you think?
Hello,
Sorry to say, it requires customization and is beyond our support policy. Additional code customizations in theme files are out of our theme support scope.
Hope you can understand!
Best Regards,
Thank you Aizaz, you can close this ticket
Hello,
You’re Most Welcome!
Feel free to write back anytime. If you need further assistance, we are always here to help you.
If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k
Thanks for contacting us.
Have a great day.
Topic Closed.
Best Regards.
The topic ‘Dynamic attribute value in title or header’ is closed to new replies.
.
