Dear XStore Support Team,
I am currently using the XStore theme for my WooCommerce website and am trying to implement a custom feature where the product title contains text enclosed within {{ }}, and I would like this text to appear on a new line with custom styling applied.
I’ve added custom code in my functions.php file using the the_title and woocommerce_template_loop_product_title filters to achieve this, which works fine on the single product pages. However, it does not seem to take effect on other parts of the site, such as the shop, category, and product listing pages on home page.
Here’s a brief overview of what I am trying to achieve:
Split the product title and apply custom styling to the text inside {{ }}.
Ensure the styled text moves to the next line on both single product pages and product listings (shop, category pages, etc.).
The custom code I’m using works in the default WooCommerce setup but appears to be overridden by the XStore theme in certain areas. Could you please provide guidance or point me to the correct hook or template that I should be targeting within the XStore theme to ensure this functionality works globally across the website?
I would greatly appreciate any assistance or documentation references that could help resolve this issue.
// Add custom styling to product titles globally (shop, category, single product)
add_filter('the_title', 'custom_style_in_title', 10, 2);
add_filter('woocommerce_template_loop_product_title', 'custom_style_in_loop_product_title');
function custom_style_in_title($title, $id) {
if (get_post_type($id) == 'product') {
// Look for text inside {{ }}
if (preg_match('/\{\{(.*?)\}\}/', $title, $matches)) {
// Apply custom styling to the text inside the curly brackets and add a line break before it
$styled_text = '<br><span class="custom-style">'.$matches[1].'</span>';
// Replace {{ text }} with the styled version
$title = str_replace($matches[0], $styled_text, $title);
}
}
return $title;
}
// Apply the same function for product loop titles (shop, category pages)
function custom_style_in_loop_product_title() {
global $product;
$title = get_the_title($product->get_id());
echo custom_style_in_title($title, $product->get_id());
}
// Enqueue custom CSS to style the text
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');
function enqueue_custom_styles() {
echo '<style>
.custom-style {
font-weight: bold;
color: #ff0000; /* Change this to your desired color */
font-size: 1.2em; /* Change this to your desired size */
display: block; /* Ensure it occupies a full line */
}
</style>';
}Thank you in advance for your support.
Best regards,
Teja
