Return to previous page

Assistance Needed with Custom Product Title Styling on XStore Theme

This topic has 4 replies, 2 voices, and was last updated 2 days, 19 hours ago ago by Luca Rossi

Vihaan

Participant

September 23, 2024 at 07:30
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

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.
#415476 Copied Theme version: 9.3.18
3 Answers
Luca Rossi

Support staff

September 24, 2024 at 07:15
Dear @Vihaan,

We hope this message finds you well. We would like to suggest an alternative approach to customizing your product title. Please consider implementing the following solution:

1. Directly add a span tag to your product title. You can view the implementation here: [https://prnt.sc/c4_at88q_sFt](https://prnt.sc/c4_at88q_sFt).

2. Subsequently, please insert the following custom CSS codes by navigating to XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.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 */
}
```
We hope this solution meets your requirements. Should you have any further questions or need additional assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team
#415610 Copied
Vihaan

Participant

September 26, 2024 at 06:14

Dear @Luca Rossi
Thanks for support and suggestion.

I recently implemented custom code to style and format my WooCommerce product titles on my website, The issue I was experiencing has been resolved on the home page, but I’ve encountered a new problem on the shop page and category pages.

On the shop page and category pages, the full product title is not visible. It seems to be cut off, the title is either not displaying correctly or is completely missing.

Could you please assist me in resolving this issue so that the full product title is displayed properly on the shop page and category pages with the custom styling?

I appreciate your support and look forward to your guidance.

I added links in private content area.

Best regards,
Teja

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#415886 Copied

Luca Rossi

Support staff

September 26, 2024 at 09:58

Hi @Vihaan,

We’ve disabled the limit option of product title: https://prnt.sc/anvmmEqHvKi5.

Now everything is working fine now.

Can you please check again?

Thank you!

#415915 Copied
Tagged: custom product title styling, ecommerce site customization, professional web assistance, website design help, woocommerce wordpress templates, wordpress theme styling, xstore theme assistance
Viewing 4 results - 1 through 4 (of 4 total)