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,
.
