Additional CSS does not display consistently

• 

  gudyoooo · Member · Apr 9, 2023 at 10:38 pm

  • Copy link
  • Add topic to favorites

  Background: I hava a woocommerce-enabled website which uses the Tsubaki WP theme (comes for free with my subscription and was recommended by WP Customer Support engineer). I am using the default template for a single product page.

  Goal: I would like to (1) round the Add To Cart button (2) round and shorten the quantity input (3) disable the click to zoom functionality on the product gallery image.

  I have tried adding Additional CSS (Appearance > Additional CSS) to no avail. The process I have followed is (1) make a change in Additional CSS, then (2) update the published product page. (Note: The page is currently locked with a password because it is WIP).

  When I make the changes within Chrome > Inspect, they happen.

  One of the problems I am facing is that ONLY the first CSS rule ever gets applied. Example:

  // First CSS Rule: Round add to cart button
  .woocommerce div.product form.cart button.single_add_to_cart_button,.woocommerce div.product form.cart button[name=add-to-cart] {
  border-radius: 30px;
  } 

  // Second CSS Rule: Round and shorten quantity
  .woocommerce .quantity input[type=number] {
  width: 2em;
  border-radius:5px;
  }

  If I move the quantity rule above the cart button rule – then it gets applied and the cart one doesn’t.

  The CSS to disable the click events in the gallery image I have been using is below. It also works in chrome on its own and I have had the same inconsistent behavior with it when added to the additional CSS.

  div.woocommerce-product-gallery__image {
  pointer-events: none;
  }

  This is super confusing and frustrating. I even tried nested rules and still made no difference. Obviously, the order can matter, but what am I missing?

  Any help is appreciated! :)

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  aisajib · Member · Apr 11, 2023 at 5:30 am

  • Copy link

  Hi there!

  It appears you contacted us via email as well shortly after posting here. To avoid duplicating efforts, please reply to the email we’ve sent. Your plan also gives you access to live chat support, which you can access at this link.

  Thanks!