AvisPlus Product Options
  • Get started!
    • 📍Option Set
      • 📍Option Template
    • 📍Activate App
    • ❓My options do not show
    • ✅List of our app’s compatible theme
  • App features
    • 🔎Add Charge for an option value
    • 🔎Add Bundle for an option value
    • 🔎Conditional Logic - Option B is shown/ hidden according to the value of option A
    • 🔎File Upload for Customers
    • 🔎Changing the option position on the Product page
      • Getting the HTML element
  • Customizations
    • 🔧Edit extra charges notifications
    • 🔧Edit tooltip
    • 🛠️Delete Span tags around the Add charge
  • App Overview
    • 🏆Benefits of using AvisPlus Product Options
    • 📩Contact Us
    • ⚙️Frequently Asked Questions
  • App Setup
    • ⏹️You can suspend the app when not using
    • ❌Uninstall
Powered by GitBook
On this page
  1. App features
  2. Changing the option position on the Product page

Getting the HTML element

Here is how you can get the HTML element for option repositioning.

PreviousChanging the option position on the Product pageNextEdit extra charges notifications

Last updated 1 year ago

Step 1: On your live Product page, click Right Mouse -> Inspect.

Step 2: Press this key combination Ctrl + Shift + C and point to the element you want to use for the positioning of options. Kindly make sure that you choose the whole element, not just the title of that element.

For example, here I choose the "Quantity" element

Step 3: Here you will see a line of code for that element, copy the class of that element and then fill it in the element box for option position.

For example, the "Quantity" element has this code: <div class="product-form__input product-form__quantity">

This would be the HTLM element we need: product-form__input product-form__quantity

Step 4: After you get the class, add “.” at the top and replace the space characters with “.” to finish, and then hit "Save changes".

For example: product-form__input product-form__quantity -> .product-form__input.product-form__quantity

🔎