I changed the dropdown box on my product page to radio buttons using javascript, which works fine.
The problem is that now, the image does not change anymore when changing the product variation.
On the default dropdown box that woocommerce gives for variations, there was some sort of function happening, which changes the current-image attribute inside the product form element. I am trying to replicate this on my radio buttons.
My radio buttons look something like this:
<label for="green">green</label>
<input class="attached enabled" type="radio" name="colors" id="green" value="green">
I have tried to find the code where woocommerce does this inside the template folder, but I think this is happening in one of the woocommerce hooks, or in the woocommerce javascript file.
Related
The problem: Radio Button for shipping options successfully goes to selected state which clicked, but does not show a black dot in the selected item to show to the user that it's been selected.
This is on this WooCommerce checkout page of my site. Sorry, the only way to go there is to first select an item on the store, then proceed to checkout: https://dayhikesneardenver.com/shop/
I've inspected the using google chrome inspect page and cannot for the life of me figure out if this is an issue with: 1) My Uncode theme styles, 2) WooCommerce styles, or 3) something else.
Thanks for any insight on this.
When removing the "webkit-appearance: none" property on the radio button form or changing it (webkit-appearance: checkbox) the button appears checked.
The properties
I think something else is overwritting the original style of the button.
Before
After
Whenever I add a widget under Appearance -> Widgets, all of the items in the form load, and then disappear after a second or two. This is happening for all widgets, and this is what they look like when it happens:
Something is changing all type tags to hidden:
<input type="hidden" ...>
And all of the tags containing text get "display: none" added to them:
<div class="widget-description" style="display: none;">
A calendar of your site’s Posts.
</div>
The widget description class also gets display:none added to them.
However, when I reload the page after adding the widget, the form loads as expected. It only happens when the widget is first added. Has anyone run into this issue?
The issue ended after updating Wordpress to 5.2.2 and above
I have a team page built via ACF. I have 5 members and each of them contains a "View Profile" button.
How can I assign a different color code for each of the button using ACF ?
<button style="width:25%; float:right;">View Profile.</button>
The ACF plugin has a color picker field option that you could include in the Team Member field group: https://www.advancedcustomfields.com/resources/color-picker/
So you could, in the template, do something like this:
View Profile
Note that I removed your button wrapper, just for clarity. You probably don't really want to wrap an <a> within a <button>, but I'm guessing you're doing so because of some styling. There's PROBABLY a button class that can be applied to the <a> to give it some nicer styling, depending on what theme you're using.
I have created a form where a user can pick options prior to submitting the form. I am hiding the checkboxes with display: none and am styling the <label> so that when the user clicks the label it triggers the checkbox.
I've got this to work in vanilla HTML and CSS, however when I try this in React, clicking the label doesn't do anything. ONLY if I unhide the checkbox am I able to click on the checkbox and am able to see the label styling. I want to hide the checkbox though.
Does anyone know how to hide the checkbox and still able to click the label in ReactJS?
Here is the codepen of what I am trying to build in ReactJS.
Use htmlFor instead of for in react (see react supported attributes):
<input type="checkbox" id="check3"/> Fish
<label htmlFor="check3"><span class="fa fa-check"/></label>
As it was already stated - use htmlFor and then try adding onClick event on label instead of on an input. This will add/remove checked attribute on the input itself. I assume that you already use defaultChecked attribute on your input.
please help my add to cart button is missing
Site:http://emceecouture.com/shop/mc728/#.Uwx05fSSz1g
I really have no idea where to retrieve it back
simplest workaround is to change class of div containing product quantity and add to cart button (/woocommerce/single-product/add-to-cart/variable.php).
i.e. from
<div class="single_variation_wrap">
to
<div class="single_variation_wrap_mod">
to fool js which is adding style="display:none" even when you remove it from html code.
I can't understand why woocommerce developers decided to hide this button and add js to show it after someone selects variation, rather than (as every other ecommerce on the planet) show add to cart button, and focus on the attributes if someone haven't selected one.
IMHO this is an UX fail.