I have hidden the label of the variation box with CSS and added a custom text to the select box containing the name of the attribute. This is the code I used for that:
function filter_woocommerce_dropdown_variation_attribute_options_args( $array ) {
$attribute_name = wc_attribute_label($array['attribute']);
$select_text = 'Choose an ' . $attribute_name;
$array['show_option_none'] = __( $select_text, 'woocommerce' );
return $array;
};
add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'filter_woocommerce_dropdown_variation_attribute_options_args', 10, 1 );
CSS for hiding the label:
.variations th.label {
display: none;
}
Now I just want to make this sentence capatilized but I can't find the right css for this. I'm almost sure I need to use text-transform: capatilize but I'm not sure where to add it and most important with which css class/id. Can I add it to the snippet maybe?
I tried some answers from similar questions here but they all didn't work.
Any help is appreciated.
function filter_woocommerce_dropdown_variation_attribute_options_args( $array ) {
$attribute_name = wc_attribute_label($array['attribute']);
$select_text = ucwords( 'Choose an ' . $attribute_name );
$array['show_option_none'] = __( $select_text, 'woocommerce' );
return $array;
};
add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'filter_woocommerce_dropdown_variation_attribute_options_args', 10, 1 );
Please check the links for changing the string case to upper, lower, capitalize...
Related
I’m trying to modify the word “reservado” or “backordered” in the order details page.
I use the following code, unfortunately without the desired result. The "backordered" text does not change, any advice?
function custom_backorder_message( $text, $product ){
if ($product->is_on_backorder( 0 ) ) {
$text = __( 'This item may take 3-4 weeks to deliver' );
}
return $text;
}
add_filter( 'woocommerce_get_availability_text', 'custom_backorder_message', 10, 2 );
If you want to change it via code you can use the woocommerce_backordered_item_meta_name filter hook.
So you get:
function filter_woocommerce_backordered_item_meta_name( $string, $item ) {
// Replace with new text
$string = 'My new text';
return $string;
}
add_filter( 'woocommerce_backordered_item_meta_name', 'filter_woocommerce_backordered_item_meta_name', 10, 2 );
But you could also change it in the language file.
I have a wordpress website where customers make an image with text and icons, once processed thru woocommerce and payed for that image name 12345.png is saved as Customer_product_image
function add_order_item_meta($item_id, $values) {
$key = 'customer_product_image'; // Define your key here
$value = $values['user_img']; // Get your value here
woocommerce_add_order_item_meta($item_id, $key, $value);
}
And i works great, but now i'm banning my head against the wall! When the purchased image is displayed on the Order admin detail page, it shows up as CUSTOMER_PRODUCT_IMAGE: 1234.png how on earth would i go about wrapping that within an image tag so the image is displayed there?
I've searched high and low on google but haven't been able to find anything, its probably that i dont know what do actually search for....
This did the trick for me!
First i added this snippet for removing the custom meta item on order detail render:
add_filter( 'woocommerce_hidden_order_itemmeta', 'hide_order_item_meta_fields' );
function hide_order_item_meta_fields( $fields ) {
$fields[] = 'current_view';
$fields[] = 'custom_image';//Add all meta keys to this array,so that it will not be displayed in order meta box
return $fields;
}
second i added it back with this, and with the desired text and image tag:
add_action( 'woocommerce_after_order_itemmeta', 'order_meta_customized_display',10, 3 );
function order_meta_customized_display( $item_id, $item, $product ){
$all_meta_data=get_metadata( 'order_item', $item_id, "", "");
$useless = array(
"_qty","_tax_class","_variation_id","_product_id","_line_subtotal","_line_total","_line_subtotal_tax","_line_tax","_line_tax_data"
);// Add key values that you want to ignore
$customized_array= array();
foreach($all_meta_data as $data_meta_key => $value) {
if(!in_array($data_meta_key,$useless)){
$newKey = ucwords(str_replace('_'," ",$data_meta_key ));//To remove underscrore and capitalize
$customized_array[$newKey]=ucwords(str_replace('_'," ",$value[0])); // Pushing each value to the new array
}
}
if (!empty($customized_array)) {
foreach($customized_array as $data_meta_key => $value){
echo "<div class='product_container'><span>Produkt Billede: </span><img src='".wp_upload_dir()['baseurl'].'/flapper/'. $value ."' /> </div>";
}
}
}
i found the answer to this question on this page
You can use the filter woocommerce_order_item_display_meta_value to output the image. Place this code in your functions.php file, you'll need to modify the src attribute of the img tag to include the appropriate URL before the filename value. You can also modify the display label with the filter woocommerce_order_item_display_meta_key
add_filter( 'woocommerce_order_item_display_meta_value', 'modify_order_item_display_value' , 10, 3 );
function modify_order_item_display_value( $display_value, $meta, $wc_order_item ) {
$meta_data = $meta->get_data();
if( $meta_data['key'] === 'customer_product_image' ) {
return '<img src="' . $meta_data['value'] . '">';
}
return $display_value;
}
add_filter('woocommerce_order_item_display_meta_key', 'modify_order_item_display_key', 10, 3);
function modify_order_item_display_key( $display_key, $meta, $wc_order_item ) {
$meta_data = $meta->get_data();
if( $meta_data['key'] === 'customer_product_image' ) {
return 'Customer Image';
}
return $display_key;
}
I want to add a product short description by default whenever is the new product is being created. All the products will have the same short description, so there is no point keep copying and pasting it. So it should just be there when I click on the add a new product.
I would appreciate any help.
add_filter( 'woocommerce_short_description',
'single_product_short_description', 10, 1 );
function single_product_short_description( $post_excerpt )
{
global $product;
if ( is_single( $product->id ) )
$post_excerpt = '<div class="product-message"><p>' . __( "Article only
available in the store.", "woocommerce" ) . '</p></div>' . $post_excerpt;
return $post_excerpt;
}
I found the above code but couldn't get it to work :(
Thank you.
Regards,
Emre.
Add this code inside your themes function.php
Change the short description content as per your need - "Here goes your short desc."
add_filter( 'wp_insert_post_data' , 'cdx_add_product_short_desc' , '99', 1 );
function cdx_add_product_short_desc( $data )
{
//only for product post type
if($data['post_type'] == 'product' ) {
//only if short description is not present
if( '' == trim($data['post_excerpt']) ):
$short_desc = 'Here goes your short desc.';
$data['post_excerpt'] = $short_desc ;
endif;
}
// Returns the modified data.
return $data;
}
This will work to automatically override anything put into a product's short description field on the front-end only. It will not add the text to the backend field itself, which is good because it keeps it globalized if you need to change it later.
add_filter( 'woocommerce_short_description', 'filter_woocommerce_short_description', 10, 1 );
function filter_woocommerce_short_description( $post_excerpt ) {
$post_excerpt = '<div class="product-message"><p>' . __( "Article only available in the store.", "woocommerce" ) . '</p></div>';
return $post_excerpt;
}
I have a problem that drives me mad, and can't find a solution to it in the documentation...
I want to hook in to Wordpress' post_gallery function to add a Class to the dl element that wraps the WP generated gallery individual images. By this I want to have the option to have full width images that can be controlled in the Attachments window of WP Media via ACF switch
if ( get_field('fullwidth') == 1 ){
$classname = 'fullwidth';
} else {
$classname = "";
}
Also setting the img "src" to the Large for these fullwidth images would come handy, so the page-load is not too slow.
Do I need to rewrite the whole gallery generating code from here?
https://core.trac.wordpress.org/browser/trunk/src/wp-includes/media.php
Can it be done via this method at all, or should I somehow try to hook in to the_content? But also for that method, I didn't find any info in regard how galleries are generated...
to add a Class to the dl element that wraps the WP generated gallery individual images
Instead of that, why don't you — using the Text/HTML editor — add the gallery like this:
<div class="fullwidth">
[gallery ... /]
</div>
(the three dots indicates the Shortcode parameters such as ids, size, and link)
And write some CSS code similar to:
.fullwidth .gallery-item {
/* Add styles for the DL (or FIGURE for HTML5-supported themes) element that wraps the gallery image and caption. */
}
.fullwidth .gallery-icon {
/* Add styles for the DT (or DIV for HTML5-supported themes) element that wraps the gallery image. */
}
.fullwidth .gallery-caption {
/* Add styles for the DD (or FIGCAPTION for HTML5-supported themes) element that wraps the gallery caption. */
}
[EDIT] Below is a custom Shortcode; used the exact same way you'd use the default [gallery] Shortcode.
Add these to the theme's functions.php file:
/**
* #param array $attr
* #param WP_Post $attachment
*/
function gallery_shortcode2_image_attributes( $attr, $attachment ) {
// Name of the custom field. (ACF)
$field_name = 'fullwidth';
if ( get_field( $field_name, $attachment->ID ) ) {
$attr['data-gallery-layout'] = 'full-width';
}
return $attr;
}
add_shortcode( 'gallery2', 'gallery_shortcode2' );
function gallery_shortcode2( $attr ) {
$atts = shortcode_atts( array(
'itemtag' => 'figure', // I'm assuming we'll always be using HTML5-supported themes..
'fwclass' => 'fullwidth', // The CSS class applied to items with, well, full-width layout.
'size' => 'medium_large', // You may change the default value; to "large", "custom", etc.
), $attr );
// Don't modify anything below unless you're 100% sure of what you're doing. =)
$itemtag = tag_escape( $atts['itemtag'] );
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) ) {
$itemtag = 'dl';
}
add_filter( 'wp_get_attachment_image_attributes', 'gallery_shortcode2_image_attributes', 10, 2 );
$output = gallery_shortcode( array_merge( $attr, $atts ) );
$output2 = '';
remove_filter( 'wp_get_attachment_image_attributes', 'gallery_shortcode2_image_attributes', 10, 2 );
$_tag = '<' . preg_quote( $itemtag ) . ' class=\'gallery-item\'>';
$arr = preg_split( "/($_tag)/", $output, -1, PREG_SPLIT_DELIM_CAPTURE );
for ( $i = 0, $j = 1; $i < count( $arr ); $i++, $j++ ) {
if ( $_tag === $arr[ $i ] && isset( $arr[ $j ] ) ) {
$class = 'gallery-item';
if ( preg_match( '/<img (.*?) data-gallery-layout="full-width"/', $arr[ $j ] ) ) {
$class .= ' ' . $atts['fwclass'];
}
$output2 .= '<' . $itemtag . ' class=\'' . esc_attr( $class ) . '\'>';
} else {
$output2 .= $arr[ $i ];
}
}
unset( $output, $arr );
return $output2;
}
And use [gallery2] instead of [gallery]; same arguments (e.g. ids and size), but with one extra argument for [gallery2], which is fwclass. (Refer to the gallery_shortcode() function for details on that argument.)
Hopefully [gallery2] works for you, like it did for me.
NOTE: Use [gallery2] only if you want to add a custom CSS class to the individual gallery item element (i.e. .gallery-item). Otherwise, use the default Shortcode — [gallery].
i want to force the attribute "alt" on thumbnail when admin add new thumbnail on wordpress.
if there is javascript hook on saving thumbnail validator on the input "title" that's well be great!
Thank you.
Found this, place it in your functions.php file in your theme directory
function add_alt_tags($content)
{
global $post;
preg_match_all('/<img (.*?)\/>/', $content, $images);
if(!is_null($images))
{
foreach($images[1] as $index => $value)
{
if(!preg_match('/alt=/', $value))
{
$new_img = str_replace('<img', '<img alt="'.$post->post_title.'"', $images[0][$index]);
$content = str_replace($images[0][$index], $new_img, $content);
}
}
}
return $content;
}
add_filter('the_content', 'add_alt_tags', 99999);
Find more here http://www.paulund.co.uk/add-missing-alt-tags-to-wordpress-images
This is going on my snippet site. Hope it helps
By default, the image returned does not have a title or alt attribute. (Since WordPress 4.7, the alt attribute is no longer added automatically. It will only have an alt attribute if you specifically entered "Alt text" while uploading the image, or if you go back to the Media library and enter "Alt text" for the image).
Currently website(s) traffic from Google search is considerably higher if your images all have (title attribute tags), as well as (alt tags). So, I add the title and alt attributes to post thumbnails with the following function which goes in your theme "functions.php" file. The value for the title and alt attributes will be taken from the title of the image, which is the title of the attachment (not the actual post title).
function eln_add_img_title( $attr, $attachment = null ) {
$img_title = trim( strip_tags( $attachment->post_title ) );
$attr['title'] = $img_title;
$attr['alt'] = $img_title;
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes','eln_add_img_title', 10, 2
);
If you don't want the image attributes taken from default image name
you can change the code so the image attributes taken from
"post_title" as follow:
// Force adding missing image alt & title for WordPress.
function eln_add_img_title( $attr, $attachment = null ) {
$img_title = trim( strip_tags( $attachment->post_title ) );
$attr['title'] = the_title_attribute( 'echo=0' );
$attr['alt'] = the_title_attribute( 'echo=0' );
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes','isa_add_img_title', 10, 2 );
Hope this help you and save your time, Have a nice day :)