asked on

Create a drop down recurring system similar to my competitor

Hi,

My competitor has a recurring subscription service which you can see below - the user can either click no subscription or if they click a subscription recurring they get to choose from a drop down:

https://us.brushnaked.com/collections/adult-toothbrushes/products/adult-soft-activated-charcoal-bristle-toothbrush

I would like the same layout/style on my site you can see how it is now below:

https://staging1.barebrush.com.au/product/bio-toothbrush/

Here is the code for that part of the page (note I am using the Subscribe All Things Master plugin (https://github.com/somewherewarm/woocommerce-subscribe-all-the-things) and this is one of the template pages):

https://gist.github.com/HeadStudios/3f03286f1672d271d7cb96fd3a8db6fe

Any input you could give on functions/CSS styles to use and the overall view of how to approach it would be much appreciated.

Thanks

lenamtl

Hi,

Your competitor is using shopify theme https://github.com/Shopify/slate

On your competitor website you can use Chrome right click inspect on the input you will see the css class for this element.
and then you can check the CSS file of your competitor and get the related class code that you need.
https://cdn.shopify.com/s/files/1/0987/4218/t/6/assets/theme.css

div class : class="bold-ro__radio-div bold-ro__recurring-div bold-ro__sub bold-ro__bold-active"
input class: class="bold-ro__mixed-radio-btn bold-ro__subscribe-radio-btn"

Open in new window

check on the right box you will see the class code

Of course you will need to adjust it to your actual CSS theme.

Your competitor display 2 dropdown you display one if you want the same you will need to have 2 instead of one.

There are several theme for form field and usually you will need to edit the CSS that come with the script and the one of your theme.

Or you can change the overall theme if you want some uniformity for form fields...
https://themeforest.net/category/wordpress/ecommerce/woocommerce

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.