Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Change CSS at WooCommere checkout page for specific product – Woocommerce

I created a WooCommerce checkout page using Elementor to customize its look and feel. At the top there is a section with class .elementor-widget-icon-list above the checkout fields that reads: Luego de abonar…

I would like to apply the CSS property display: none at the checkout page to the class .elementor-widget-icon-list only if the product ID is 1813.

To see what I mean, you can go to the following link and click on Comprar at the bottom, you’ll be redirected to the checkout page I am talking about: https://aefcoaching.com/gimnasio-mental-comprar/

So, can this be done? If so, how? Thanks!

Tags:

2

Answers


  1. 0

    You can achieve it using the functions.php file in the child theme. There are many ways and I think the most efficient one would be to create a hook for a specific page and add jQuery or CSS there. It looks like this (JavaScript aproach):

    Code for functions.php file

      function my_super_hook() {
    if ( is_single(1813) && is_product() ) {
     wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
    }
}



add_action( 'wp_enqueue_scripts', 'my_super_hook' );

    In your custom.js use JavaScript to set

    $(".elementor-widget-icon-list").css("display", "none");

    Of course, you can import a CSS file instead of js if you want.

    Login or Signup to reply.
  2. 0

    put this in your theme in the file :

    function.php

    global $woocommerce;
      
    $productID = wc_get_order( $order_id );
      
    if ( $productID ) {
    if ($productID == 1813){
    echo "<style> .elementor-widget-container { display: none !important ; } <style>"
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search