How to Add Woocommerce Product Addons & Custom Fields for Free?
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- In this video I’m going to show you how to add Woocommerce product addons and custom fields on your product pages for free. It’s fairly easy and will take only a couple of minutes.
CSS code shown in the video (you may need to tweak it according to your theme):
label.form-control-label {
font-weight: 600;
padding: 10px;
border-radius: 10px 10px 0px 0px;
background: #E1D9D1;
margin-bottom: 1em;
}
.ppom-wrapper .form-group {
margin-bottom: 1rem;
border: 1px solid #ebebeb;
padding-bottom: 20px;
border-radius: 10px;
background: #f9f9f9;
}
.ppom-wrapper .form-check-inline {
padding-left: 20px;
}
Blocksy and Kadence are currently two of the best WordPress themes. So, if you’re interested, then you can grab:
🅱️ Blocksy theme wpsimplehacks.... (SAVE 10% Coupon WPSH10)
🔵 Kadence theme here: wpsimplehacks.... (SAVE 10% Coupon SIMPLEHACKS)
✅ If you want to be the first to be notified about the new tutorials then please subscribe to this channel. / @wpsimplehacks
✅ BEST WORDPRESS THEMES:
Blocksy theme: wpsimplehacks.... (SAVE 10% Coupon WPSH10)
Kadence Theme: wpsimplehacks.... (SAVE 10% Coupon SIMPLEHACKS)
Astra Theme: wpsimplehacks....
GeneratePress: wpsimplehacks....
OceanWP: wpsimplehacks.... (SAVE 10% Coupon WPSH10)
✅ MY FAVORITE WEBHOSTING PROVIDER:
Verpex Hosting wpsimplehacks.... (SAVE 22% Coupon WPSH22)
✅ AWESOME WORDPRESS PLUGINS:
WPCodeBox wpsimplehacks.... (SAVE 20% Coupon WPSH20)
Flowmattic no-coding automation plugin wpsimplehacks.... (SAVE 15% Coupon WPSH15)
ShopLentor Elementor/Gutenberg add-on wpsimplehacks.... (SAVE 20% Coupon WPSH20)
Best Wordpress Backup, Migration and Staging plugin - WpVivid Pro wpsimplehacks.... (SAVE 20% Coupon WPSH20)
Best Gutenberg Blocks addon - Kadence Blocks wpsimplehacks.... (SAVE 10% Coupon SIMPLEHACKS)
Best forms plugin - Fluent Forms: wpsimplehacks.... (SAVE 20% Coupon: WPSH20)
WP Social Ninja wpsimplehacks.... (SAVE 20% Coupon: WPSH20)
Best for email marketing - Fluent CRM: wpsimplehacks.... (SAVE 20% Coupon: WPSH20)
Best for creating tables - Ninja Tables wpsimplehacks.... (SAVE 20% Coupon: WPSH20)
Best events calendar and ticket selling plugin - WP Eventin wpsimplehacks.... (SAVE 20% Coupon: WPSH20)
Best Wordpress LMS - Tutor LMS wpsimplehacks.... (SAVE 20% Coupon thmwelcome20)
Best Wordpress SEO plugin - SEOPress wpsimplehacks....
Image Map Pro - wpsimplehacks....
✅ AWESOME WOOOCOMMERCE EXTENSIONS:
Best Woocommerce Swiss Knife tool - Kadence Shop Kit wpsimplehacks.... (SAVE 10% Coupon SIMPLEHACKS)
Best visual sales funnel builder - WpFunnels wpsimplehacks.... (SAVE 10% Coupon WPSH10)
Advanced Dynamic Pricing Pro wpsimplehacks.... (SAVE 20% Coupon: WPSH20)
Phone orders For Woocommerce Pro wpsimplehacks.... (SAVE 20% coupon: WPSH20)
Advanced Orders Export Pro wpsimplehacks.... (SAVE 20% coupon: WPSH20)
Location Picker at Checkout for WooCommerce wpsimplehacks.... (SAVE 15% coupon: WPSH15)
Best Woocommerce sidecart plugin - Woocommerce Cart in One wpsimplehacks....
What you are doing with Woocomerce is really amazing. Thanks for the great tips!
Glad it was helpful!
It's working in a free theme little bit of product and add-on prices rows up and down but
I adjusted and now it's fine.
Thanks a lot.
Great 😊
Amazing! I was looking for this ! Cheers from Romania-Bucharest.
Glad it helped :)
Thanks so much for this tutorial! After watching at least a dozen, yours was the most helpful by far :)
Glad it helped :)
Big Thank You for this video man. I have been trying to use the HTML tag on the Elementor forms to do the calculations for a while now when I could have just done this
😊
Thank you so much, I was looking to do exactly this for more then 2 weeks. I'm glad that I found your video. I solved my problems in 5 minutes. Great Job.
Glad it worked :)
@@wpsimplehacks any chance to add a button + to open and close the different section? i mean like a toogle box... I won't my customers see everything all at once, like if they want drink they will open that section and choose what they like.
Wow this is very useful, i was searching for some time..thanks alot
Glad it was helpful!
Awesome tutorial, mister. New suscriber here. Thanks so much!!
Glad you liked it 🙂
As a Korean, I had a lot of trouble while learning WordPress, because the terminology and code were difficult, but just listening to the TH-camr's explanation gave me courage and confidence, saying, "Oh, this is all I can do."
While watching this, I recently got a clue on how to build a shopping mall that I need to build for my clients. I have a question.
How did the heart-shaped icon next to the add to cart in the 50 seconds of the video implement the wish list function?
thank you.
It's from the theme I'm using (Blocksy Pro). It has a wishlist built in.
Great video, just what I needed. The CSS snippet was also a nice little touch. Can you show a bit of CSS for the radio button to put the question AFTER the button instead of underneath the button?
Sorry, can’t help you with that.
Very good tutorial, thank you for taking your time to make it!
One question: Can I use this in connection to a gallery (or several galleries) that switches to display correct images when the alternative is choosen?
Nope. If you need to display a separate gallery for the variation, then there are some free plugins for it
Thank you so much for this! Works perfectly.
You're welcome!
Thanks
please can you make a video about creating a restaurant website with Woocommerce
How about this th-cam.com/video/p6g3hVtq_E0/w-d-xo.html
I see this great video, but how can I make for example all pizza's price every Monday €10, I see no option
Thank you!
You're welcome! 🙂
Great work...
I was wondering whether i can add these options or not..
you have my heart man ❤
Thank you for watching 😊
Very useful video for me. Thank you
Glad to hear that
Hi. How would I query one of these fields and a specific product from PHP? Thanks (Love your videos) Neil
Sorry, unfortunately I can't help with that because it needs some custom coding and extra work.
Amazing
Stay Blessed
Thanks. ☺️
This tutorial was very helpful in adding conditions for extra toppings, thank you so much!
Although I am getting option totals, it does not recognize and include the original price of the pizza as you have at 6:22 . Does this plugin work for every theme or what could I be doing wrong here? I have it as a simple product with a regular price entered. Many thanks!
It would be wise to contatct a plugin support team about this.
It might be a limitation in the free version
Super great video and extension, thanks for sharing. I do however have a bug with the checkbox options. No matter what I do, it only registers the add-on if someone checked the last option.. Have anyone seen similar problem and found a solution?
It would be wise to ask about it from the plugin support team.
hey, thanks for this insightful video. But, could you help me with to change the label while adding select your drink? you can see that if 2 drinks are added, then it shows select your drink Tubo, select your drink saku on ice. Now, if I want remove this "select your drink" just on these lines How can I do this? any suggestion please
It would be wise to ask about it from the plugin support team
another GEM
🙌
Thanks :)
nice video! thanks!
Thank you for watching :)
Thank you for your helpful videos. i have a question please. How do i get the addon table to display like yours. In yours, the checkbox options display right below the extras title. but on mine the checkbox options display on the same line as the title which make it illegible and not visually please. did you add some sort of css to align it? Thank you.
Maybe it’s theme releated, I’m not sure.
All of your videos are absolutely amazing and so helpful.
Can you add a PPOM field to a woocommerce bookable product? I have a nurse whose time you book (a bookable product) and during checkout I would also like to add various services (simple products, not resources) that the client can select (check boxes) and then checkout/pay for everything. Is this possible?! Please help. Trying to figure this out for a month now. Sigh. Any help would be appreciated.
It owuld be wise to ask about it directly from the plugin support team.
How do i add an image together with the radio / checkbox/ select input?
It would be wise to ask about it from the plugin support team directly
hello =o)
great video! Thank you very much !
do you know why the decimal places only show €5.00? I would like to enter 5,90 €. Unfortunately it doesn't work. Do I need the PRO version for this?
Woocommerce >> Settings >> General >> Number of decimals. If this didn’t work, then it would be wise to ask about it from the plugin support team.
How can i get ppom to add an sku to my cart so that my warehouse onow what to pick?
It would be wise to ask about it directly from the plugin support team.
is there any free plugin that can change the defaul dropdown select style of WooCommerce variable products into checkboxes?
See this wordpress.org/plugins/wpc-variations-radio-buttons/
and this wordpress.org/plugins/wc-variations-radio-buttons/
thanks pro 😃😀
You’re welcome
Sir , how can we add acf fields in custom single product page (custom product page creating using shopengine .... ,using elementor free version, so no dynamic tag option)
I am watching so many videos in TH-cam but i didn't get any solution
Here, i create book store so want to add book author, publisher, date...... In custom single product page
Sorry, can't help you with that because I don't use Elementor. Also, Elementor free doesn't support custom fields (Pro version has this feature).
If I want to have multiple select groups attached to the same product, do I have to go to the Pro version?
Unfortunately, I don't know the answer to this. It would be wise to ask about it from the plugin support team.
Can you add a field with a fee that can be set to non taxable.
Not that I knew of, but it would be wise to ask about it from the plugin support team.
NIce. But when I do this, the variations that I added from the woocommerce normal setting was gone. It only shows the PPOM fields. It doesn't include the fields from the normal setting of woocommerce. Is there a way that I can show them or this is just the way it is?
It would be wise to ask about it from the plugin support team
hello thanks for the vidéo, you you think you could do a vidéo to show how to put (related product h2 to h3) and then how to edit category and product woocomerce (like to add links image, etc) cause woocommerce default version is very limited, thanks.
J'ai vraiment pas compris ta question. Tu peux m'expliquer en français? Soit j'aurai la solution pour toi, soit je poserai la question en m'assurant qu'il comprenne.
Probaly I’m not going to make a video about it.
I went through the steps and added a radio option for an add-on. It allows to pick which option but there aren’t any prices attached. Even though I entered them in. Do you need pro version to add in the additional price option? Or am I missing a step?
Did you try this cln.sh/Sf695B3p
If yes, and it still not working then it would be wise to ask about it from the plugin support team.
The addon work in all product when i use elementor single product
Elementor overrides default Woocommerce hooks. It would be wise to ask this directly from the plugin support team.
@@wpsimplehacks thank you, but is there a way to put looklike this product addon in single product elementor ?
Free plugins up img ?? Thank you
Sorry... What?
Hey, Thanks for the video, I need your help can you help me?
It would be wise to ask support from the plugin support team