Add class to related-products component

Hello @vds1dgtl,

You can use a WooCommerce hook woocommerce_output_related_products_args to add the class programmatically: This function uses WooCommerce’s hook to wrap the related products section with a custom class without having to modify the related.php template.

add_filter( 'woocommerce_output_related_products_args', 'custom_related_products_class' );
function custom_related_products_class( $args ) {
    $args['before'] = '<div class="related-products-container custom-class">';
    $args['after']  = '</div>';
    return $args;
}

Let me know how it goes or if you need further assistance!

Hi! Thank you for your answer. Unfortunately, after adding it to my functions.php, its not working, not having any effect.

For the moment, just to solve this quick, Ill use this javascript code to add my class to the div of the related products section:

// Select all elements that have the class ‘target-class’

const elements = document.querySelectorAll(‘.target-class’);

// Loop through each element and add the new class ‘new-class’

elements.forEach(element =>

{ element.classList.add(‘new-class’);

});

Hi @vds1dgtl ,

I understand where you’re coming from, tweaking those details can be tricky. Editing template files might seem like the way to go, but it’s not always straightforward, especially with updates that might overwrite your changes.

Just to clarify, we can lend a hand with general guidance for WooCommerce Core functionality and help troubleshoot, but diving into custom code is outside the scope of what we can offer.

For the moment, just to solve this quick, Ill use this javascript code to add my class to the div of the related products section:

Your JavaScript workaround is a clever move for quickly adding a class! Does that solve the issue for now? If you’re looking to make more permanent changes without touching the code each time, there might be plugins or extensions that could help manage WooCommerce product display options, although I don’t have a specific one to recommend at this moment.

If you need further help with the code, we recommend asking your development questions in the WooCommerce Community Slack?. Many of our developers are active there and can help. You can also get help from the following:

• Codeable.io
• WooExperts

Hope this helps!