I've taken over a plugin which relies heavily on Advanced Custom Fields. For further development I updated ACF from version 4 to the latest version (5.8.x).
The plugin includes styles and scripts relying on HTML element (e.g. input) IDs such as acf-field-header_caption, where header_caption is the field name. This works well with ACF 4, but in version 5, the much less coder-friendly field key (e.g. 5ac098bae96e4) is used for the IDs and classes, eg: acf-field-5ac098bae96e4. (The custom fields are added to a post_type and edited on that post_type in the backend.)
Example:
Input field in ACF v4 (what I need):
<input type="text" id="acf-field-header_caption" class="text" name="fields[field_5ac098bae96e4]" value="" placeholder="">
Same field in ACF v5 (what I don't want):
<input type="text" id="acf-field-5ac098bae96e4" class="text" name="fields[field_5ac098bae96e4]" value="" placeholder="">
Is there a way to revert back to HTML IDs in which the field names rather than the field keys are used?
John Huebner answered this question on the ACF support forum (thanks!).
There is no way to revert to the old class and ID format. This means, you have to update custom scripts and CSS when updating to ACF 5.
If one prefers to use the field name rather than the field key for the likes of jQuery or CSS selectors, one could use the data-name attribute in the wrapper div. Example for a selector referencing header_caption input field from above:
[data-name="header_caption"] input
(This works well for text fields, radio fields and their likes have multiple inputs within the wrapper.)
I quote the original answer:
No, there isn’t a way to revert the field ID values. The only place you will find the field name is in the wrapper div data-name="field_name_here".
In addition to the change in IDs and classes, even changing them would likely not help with the JS. If the JS is dependent on ACFs JS then it probably will not work anyway. The JS in ACF5 is completely different than ACF4 and any custom JS that interacts with it would need to be completely rebuilt.
I have a problem with woocommerce variable products in specific page. When I set the attributes it says: "Sorry, this product is unavailable. Please choose a different combination.", but the products exist in database. Anyway i tried to delete all the products, and set them again. The page worked correctly but after 5 days the issue returned. Now not only not match with products, it doesnt have all the variation i have set. Only one variation in each attribute. I tried to increase the limit in config.php but nothing happens. I am using a paid flatsome theme, and the latest versions in wordpress and woocommerce. I search everywhere in the web, but i have not found any solution. This issue happens only in one variable page. The other three work perfectly
Does anyone have the same issue?
Any help will be appreciated.
Thanks in advance.
Vaggelis
After hours of searching i found the solution in my problem. The problem was in ajax_variation_threshold. I had to increase the limit of the requests. So i had to add in my functions.php this code:
function woo_custom_ajax_variation_threshold( $qty, $product ) {
return 50;
}
add_filter( 'woocommerce_ajax_variation_threshold', 'woo_custom_ajax_variation_threshold', 10, 2 );
this seems to work properly.
I had the same issue and resolved it by removing a variation which was not added by myself, and it showed as "any item" in the variation which has no price set.
Remove that variation with no price set!!!
Set an attribute first if you need a variation. The variation which has no price set has to remove form the list.
I had the same issue and resolved it by removing a product variation which was not added,like it showed as "any item" in the variation which has no price set. Remove that variation with no price, it will set
I am trying to find a way to have a link to a specific product variation.
I thought I had it solved with this plugin...
https://wordpress.org/plugins/woocommerce-direct-variation-link/
However the I have 2 word product attribute names and can't seem to get it to work? I put _, -, & and + between the 2 words but not go.
Here is the doc...In my case I would have "color style" instead of just "color"
mysite.com/product/happy-ninja/?color=blue
mysite.com/product/happy-ninja/?color=blue&size=small (additional variations should be separated by '&')
mysite.com/product/happy-ninja/?color=blue+green (where the variation value is "Blue Green" with the space replaced by a '+')
Further to the last poster, I couldn't get his code to work properly, but I did discover that WooCommerce generates these for the Cart most of the time:
Visit a variation product yourself
Add a variation to the Cart
Open your cart and hover over the item --> the link in your status bar (or right click > Copy Link Address) is it!
It should have a suffix like this:
http://website.com/product/product-name/?attribute_colours=Grey
Note that colours is lowercase because it's the slug while Grey is the actual name for the Variation.
For spaces in your Variation name, use a + instead of the space.
For selecting multiple variation attributes, I believe you can just start with & and spit the ?attribute_[slug]=Variation again.
I think many will search for a solution to link specific variations by a url parameter so here is a longer answer for that topic.
As many others mentioned here, you can access any variation with the attribute parameter. The way you choose an variation on the product details page is an select menu. The name attribute of that select is the parameter name and the options value attribute is the parameter value. Here is an example:
If you want to link the highlighted variation your link will be like https://example.com/some_product/?attribute_pa_size=small
Of course you can add multiple parameters like https://example.com/some_product/?attribute_pa_size=small&attribute_pa_color=red
The thing is, using dev tools to dig out these informations is not a very convenient solution. Down below is a code snippet you can add to your themes functions.php (or inside a simple one-file-plugin) that shows a variation-permalink in the wordpress admin of the specific product variation tab/accordeon.
add_action( 'woocommerce_product_after_variable_attributes', 'gdy_add_wc_varition_permalink', 100, 3 );
function gdy_add_wc_varition_permalink( $loop, $variation_data, $variation ) {
echo '' . __( 'Permalink for this variation' ) . '';
}
I have tried so many solutions and plugins myself, but i found a way to easily do it without a plugin. I'm not sure if this worked back in oktober 2015, but it does work now.
I have explained it in this youtube video https://www.youtube.com/watch?v=Y_hMI4bXN6A
What you want to do is add something like '/?attribute_color=red' behind your product.
website.com/shop/product1/?attribute_color=red
website.com/shop/product1/?attribute_length=10m
However what i found out by trial and error is what matters is the type of attribute you use.
You can add a attribute in 2 ways, a pre-made one (text/select) or a custom attribute. Linking directly with this method only works if you create a custom product attribute.
For it to work you have to pay attention if you used capitol letters or not. For the name of the custom product attribute it wont matter if you use capitols in the backend (as long as you dont use theme in the url). For the values however you can only use normal letters and no capitols, both in the backend as in the url itself.
Example
Name: Color
Values: red | Black, green
website.com/shop/product1/?attribute_color=red > will work
website.com/shop/product1/?attribute_Color=red > will not work
website.com/shop/product1/?attribute_color=Red > will not work
website.com/shop/product1/?attribute_color=Black > will work
website.com/shop/product1/?attribute_color=black > will not work
I have explained it in this youtube video https://www.youtube.com/watch?v=Y_hMI4bXN6A
You can just:
$variation_product_url = $variation_product->get_permalink();
WooCommerce handles the rest; adding the correct parameters to the url.
I am using a plugin Variation Swatches for WooCommerce so I am not sure if this is core wordpress / woocommerce functionality or not.
What I did was open one of my products and in ""Product data" went to "Linked Products" tab and linked one of my variations to the product. Updated and went to the product page. After clicking on the linked product I got url that looks like this:
example.eg/product/product-name-slug/?attribute_pa_kids-size=27&attribute_pa_color=navy
following ?attribute_pa_ is my attribute name slug (kids-size) and following = is slug for the single attribute slug (27, 28, blue, red, navy ...).
As you can see it works for multiple attributes in url.
If you don't know your slugs, just link your variation product to another and copy the link.
You can create direct links to variants in any case, meaning both with variants using custom attributes and variants using predefined attributes.
There is just a slight difference in the URL parameter you need to append to the URL.
Examples:
Custom attribute variant URL:
domain.com/shop/product-x/?attribute_color=blue
Predefined attribute variant URL:
domain.com/shop/product-x/?attribute_pa_color=blue
The only difference is "pa_".
Note: The question is quite old, but I got here and didn't find a full answer, so figure I'd add it for others to benefit from.
I have not tested this, but try replacing your space in your variation name to %20 which is the url-encoded version of the space character.
Another easy way to get the links without taking time to add then copy from cart is to export the product information in XML format then searching for your product in XML file and copying the link needed from there.
You can get the XML format from wordpress admin->tools->export->variables.
Open the file in sublime text 3 program and search by title or post ID.. the URL for variant will be easily found. just found it faster than adding to cart.
Simply look at your HTML code of single product page, find your product variable select combo ID and add at he end of URL: ?attribute_YOUR_ID=YOUR_VALUE
You can use combinations if you have multiple variable options, separate them with &
example:
website.com/shop/product1/?attribute_id_of_variable_combo=value_of_combo
Little JS snippet to automatically update the WooCommerce single product page URL with the needed parameters for the active variations' selection.
Each time the user changes the variation selection, the URL is updated with the new parameters, so on hard refresh the selected variation is displayed.
Also, fast way to get the direct URL to the selected variation.
Paste it into your browser console and run it. Or use it in your theme/plugins.
const els = document.querySelectorAll('.variations select')
// add el.name and el.value as query parameters to the URL
function updateURL(el) {
const url = new URL(window.location.href)
url.searchParams.set(el.name, el.value)
window.history.pushState({}, '', url.href)
}
// update the URL when the user changes the select
els.forEach(el => el.addEventListener('change', () => updateURL(el)))
Paste the below into a new entry of your browser's bookmarks bar and click on it on the given WC single product page:
javascript:(function()%7B%2F**%0A%20*%20Little%20JS%20snippet%20to%20automatically%20update%20the%20WooCommerce%20single%20product%20page%20URL%20with%20the%20needed%20parameters%20for%20the%20active%20variations'%20selection.%0A%20*%20%0A%20*%20Each%20time%20the%20user%20changes%20the%20variation%20selection%2C%20the%20URL%20is%20updated%20with%20the%20new%20parameters%2C%20so%20on%20hard%20refresh%20the%20selected%20variation%20is%20displayed.%0A%20*%20%0A%20*%20Also%2C%20fast%20way%20to%20get%20the%20direct%20URL%20to%20the%20selected%20variation.%0A%20*%20%0A%20*%20Paste%20it%20into%20your%20browser%20console%20and%20run%20it.%20Or%20use%20it%20in%20your%20theme%2Fplugins.%0A%20*%2F%0A%0Aconst%20els%20%3D%20document.querySelectorAll('.variations%20select')%0A%0A%2F%2F%20add%20el.name%20and%20el.value%20as%20query%20parameters%20to%20the%20URL%0Afunction%20updateURL(el)%20%7B%0A%20%20%20%20const%20url%20%3D%20new%20URL(window.location.href)%0A%20%20%20%20url.searchParams.set(el.name%2C%20el.value)%0A%20%20%20%20window.history.pushState(%7B%7D%2C%20''%2C%20url.href)%0A%7D%0A%0A%2F%2F%20update%20the%20URL%20when%20the%20user%20changes%20the%20select%0Aels.forEach(el%20%3D%3E%20el.addEventListener('change'%2C%20()%20%3D%3E%20updateURL(el)))%7D)()%3B
https://gist.github.com/devidw/2f674f273fb556cb48c82dc1b70aff25
Strange issue this. When I 'add to cart' it is set to redirect straight to the cart contents page to push sales however when it then loads the cart contents page the qty box is empty however if I view source at this point, the qty is there in the code. If I just click go to checkout leaving it blank (on the assumption that it is simply not displaying but is actually seeing the qty) it tells me cart is empty.
Even stranger, if I refresh the page whilst looking at the 'blank qty cart page', the qty appears for a milisecond then disappears.
It took me a while to work out shipping methods but got there in the end so this is the only issue left to sort. I asked on the wordpress forums but getting no response so if anyone could help that'd be great. I would guess it is a css issue but really just not sure.
html of qty button in 'blank' state:
<td class="product-quantity">
<div class="quantity"><input type="number" name="cart[8c5f6ecd29a0eb234459190ca51c16dd] [qty]" step="1" min="" max="" value="2" size="4" title="Qty" class="input-text qty text" maxlength="12" /></div>
</td>
corresponding css (as far as I can see, the woocommerce.css file itself is quite big but I don't want to post all of it here)
.woocommerce td.product-quantity,.woocommerce-page td.product-quantity {
min-width:80px;
color:#fff;
}
Thanks in advance
if you change your theme to the default, it works right ?
see here:
http://wordpress.org/support/topic/plugin-woocommerce-product-quantity-not-showing-on-cart-page
I am suing a wordpress contact form plugin that has a select box shortcode:
[select ID "option1""option2" "option3"]
Now in the browser, this will render as:
<select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
What I need:
I want to set the 2nd Option as the selected option, option2..
Now I know you do this by:
<select>
<option>Option1</option>
<option selected="selected">Option2</option>
<option>Option3</option>
</select>
BUT I cannot define that in the shortcode, AND I DO NOT want to do it using jquery, to accommodate people not having javascript enabled...
So how do I perhaps use CSS to set the second option as selected by default?
Thank you
The best thing you could do here is probably switch the values around.
I'm not sure if that is a possibility for you but it's the easiest solution by far w/o having to go round messing with either CSS / JS