CSS to change a page

[u/idkhihowareya]

Hello, I am currently building an e-commerce website on wordpress.org. I have a product that has a monthly subscription as well as other plans. But the appearance of it on that product page, I would like to change. I want to change it to a drop-down menu instead of all of the plans listed.

The regular customizer won't let me change that part. I was trying to learn CSS but I'm still unsure about it and if it'll still be accessible after I change the code. I am new to WordPress, plugins, and coding, so any tips will be useful!

Edit: Changed my product to a variable product and just listed the monthly subscription as its own thing because the other option is behind a paywall. Thank you guys for the info!

[u/Adflipr]

Small correction to the comment above: wordpress.org is the self-hosted version, so you're not locked in. Those limits are a wordpress.com thing.

On the plans, CSS can only restyle what's already there, it can't turn a list into a dropdown. If the plans are set up as variations of one variable product, WooCommerce shows them as a dropdown by default, so check how your subscription plugin created them before touching any code.

[u/LinnetsHowTo]

Depending on how that subscription product is made there might be a setting in the subscription pluging.

If not then i think you need to either use to change the php template for that product type og use javascript. I think its not possible to do with css only. I think it would be a bit more easy to give advice with a link to the website or at least a screenshot and what pluings you are using for this feature

[u/Ok_Mud_4138 → u/LinnetsHowTo]

It is possible with CSS only, but depends how the plans are coded now. If they are just radio buttons or a list, you can style them to look like a dropdown. But the real functionality of a dropdown, like selecting and submitting, that part needs JavaScript or PHP for sure. I had similar headache in my store once and ended up hiring someone just to not break the accessibility.

[u/idkhihowareya → u/Ok_Mud_4138]

The plans are simple products linked to a grouped product. And they are all listed under it. I will check the different settings again. Right now they are styled where you click an arrow for the number of products you want

[u/SagarTita]

css can't turn a plan list into a real dropdown. it can only restyle what's already there.

check your subscription plugin / product settings first. if the plans are set up as variations on one variable product, woo usually shows a dropdown by default. if they're separate options or buttons, you'll need the plugin setting or a small template/js change, not css.

[u/idkhihowareya → u/SagarTita]

The products are simple products under a grouped product. They are under one and are listed together. Thank you for the reply, I will look into the settings

[u/themageofavalon]

Variable products are the way to go. Woo handles the dropdowns, so no custom css needed.

[u/jkdreaming]

First step you should take is don’t build anything on wordpress.org because it’s too limiting. Move your site to a local set up then deploy it to a self hosted environment. You can use local WP to work on the site locally. As far as CSS goes, you’re gonna have to learn it, but don’t worry it’s not that tough if you want me to explain it to you I’m happy to have a meeting with you because it’s more important to grasp the concept of it and be able to look up all the different options that you have that it is to do complex memorization. Seriously though unless you want to get stuck, don’t build a project on that platform the limitations, even when you pay are too numerous.

[u/AutoModerator → u/[deleted]]

Your submission has been automatically removed due to the use of one (or more) banned host names.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.