Solved

How Can We Hide Product Variants in Our 'Starter Kit'?

  • 14 September 2022
  • 7 replies
  • 64 views

Userlevel 1
Badge

Hi there,

We offer a “Starter Kit” which includes a few extra items in addition to our main subscription product to try and get new customer through the door. Once the customer purchases the starter kit, they are subscribed to a more basic variant.

However, the user can modify their subscription back to the starter kit through the “Edit Product” section of their account at any time. Previously we were hiding the Starter Kit variant through CSS, however this does not seem to be working any more.

Our goal is to hide the bottom 3 variants from the “Edit Product” flyout:

When looking at the source, we see this:

 

 

I can hide the input and labels for “42561572012281” and the other two variants, however it leaves some rather ugly blue lines:

 

 

Is there a way we can add a unique class to the rc_purchase_type div so we can hide these containers entirely?

icon

Best answer by greg.mollison 21 September 2022, 19:08

View original

7 replies

Userlevel 3
Badge +3

Hey @JakeVH !

Thanks so much for bringing this question to the community! We definitely want to make sure that the experience in the customer portal is neat and accurate. I’ve connected with a few Recharge team members to dive into this further in order to figure out a solution for you. I’ll update here as soon as I know more!

Userlevel 3
Badge +3

Hey @JakeVH !

Since you are not using PRO Theme engine, making changes to your Customer Portal would happen in CSS as you have been doing. 

If you can provide the exact product(s) and variant(s) you are trying to hide, I can work with our support team to see if we can provide you with a solution to hide the blue line as well! As soon as you identify those for us, I’ll have our support team get started straight away.

I appreciate your patience with this!

Userlevel 5
Badge +3

@JakeVH let me know if you are in need of some simple web dev work. as another option, we’ve always worked with storetasker, leveraging their dev network for simple changes like this. 

 

Is your site built on shopify?

Userlevel 1
Badge

Thanks Greg! I will reach out with some more info via a private message

Userlevel 3
Badge +3

Just received your private message with the additional info. I’ll have our team take a look and let you know what sort of solution we can figure out!

Userlevel 1
Badge

Amazing! Thanks again

Userlevel 3
Badge +3

Hey @JakeVH !

The blue line showing up has to do with the .border-light class border property which by default is the parent of label and input elements therefore it leaves them with an empty div element that has border applied to it.

Since you aren’t currently using the PRO Theme Engine feature, the only workaround would be to create a custom script using jQuery or JavaScript and implement it in the Header or Footer HTML/CSS/JS section.

One possible workaround that our team would recommend would be to create a custom script which would loop through all the Variants options using, for an example, the .rc_purchase_type class by document.querySelectorAll() and then filter out those where they contain "Starter Kit" using includes() method, and finally remove those div elements with the remove() method.

Let me know if this is helpful in solving the issue that you were encountering!

Reply