With Woocommerce and my Storefront child theme, I am trying to prevent the fact that when clicking on a single-product image, it opens a new page with the full size image.
I want the image to be unclickable so nothing happens if the user clicks on the image in the product page.
In my child-theme functions.php, the following code prevents zooming and opening the image in a lightbox, but I want to fully deactivate the linking.
add_action( 'after_setup_theme', 'remove_hemen_theme_support', 100 );
function remove_hemen_theme_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
}
How can I achieve this?
Add this filter, it should remove your hyperlink
function e12_remove_product_image_link( $html, $post_id ) {
return preg_replace( "!<(a|/a).*?>!", '', $html );
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'e12_remove_product_image_link', 10, 2 );
you can overwrite the template woocommerce/single-product/product-thumbnails.php in your theme.
it runs the:
apply_filters(
'woocommerce_single_product_image_thumbnail_html',
sprintf(
'%s',
esc_url( $props['url'] ),
esc_attr( $image_class ),
esc_attr( $props['caption'] ),
wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
),
$attachment_id,
$post->ID,
esc_attr( $image_class )
);
How I did it with the same theme.
I created a simple plugin (but you can use functions.php) with functions I need for override the theme and inside I have this code:
add_action( 'wp', 'ts_remove_zoom_lightbox_gallery_support', 99 );
function ts_remove_zoom_lightbox_gallery_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
}
The difference between our function is that I am using "wp" instead "after_setup_theme".
Try it and let me know if is work.
Related
I want to remove the "Browse Products" button on the subscription page of My account area.
I found the output in the template file my-subscriptions.php.
But there is no filter to remove it without editing the template file.
Is there any other way to do that?
Maybe there is a way to change the link of the button (to a specific product) and the text?
This is the code for the link:
<a class="woocommerce-Button button" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>">
<?php esc_html_e( 'Browse products', 'woocommerce-subscriptions' ); ?>
</a>
add_action( 'wp_head', 'hide_browse_product_element', 100 );
function hide_browse_product_element() {
echo "<style> .no_subscriptions{display:none;} </style>";
}
Try this code snippet
If you want to change the text without overriding the template, try this
function change_browse_product_element( $translated_text, $text, $domain ) {
switch ( $translated_text ) {
case 'Browse products' :
$translated_text = __( 'My Button Text', 'woocommerce' );
break;
}
return $translated_text;
}
add_filter( 'gettext', 'change_browse_product_element', 20, 3 );
From here
For changing the link, please use below code.
add_filter( 'woocommerce_return_to_shop_redirect', 'mujuonly_rediect_browse_product' );
function mujuonly_rediect_browse_product( $url ) {
return "https://www.google.com";
}
You can hide with css:
div.woocommerce-Message.woocommerce-Message--info.woocommerce-info
a.woocommerce-Button.button
{
visibility: hidden !important;
}
Anyway hide with css just hide all message box, so no idea if this will be useful for you or somebody.
I'm trying to change the "read more" link in a child theme.
From the codex, I've added the following to the functions.php file of the parent theme (twentyseventeen)
// Replaces the excerpt "Read More" text by a link
function new_excerpt_more($more) {
global $post;
return ' <a class="moretag" href="'.
get_permalink($post->ID) . '"> Read the full article...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
...and it does what I'd like it to do.
However, I don't want it to be wiped out if the theme is ever updated.
So I've created a child-theme.
However when I add the code to the child theme functions.php file, it does not work.
My child-theme functions.php file looks like this:
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
if ( !function_exists( 'child_theme_configurator_css' ) ):
function child_theme_configurator_css() {
wp_enqueue_style( 'chld_thm_cfg_separate', trailingslashit( get_stylesheet_directory_uri() ) . 'ctc-style.css', array( 'chld_thm_cfg_parent','twentyseventeen-style' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
// END ENQUEUE PARENT ACTION
// Replaces the excerpt "Read More" text by a link
function new_excerpt_more($more) {
global $post;
return ' <a class="moretag" href="'. get_permalink($post->ID) . '"> Read the full article...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
I was able to get this to work with some information from this question:
Wordpress functions.php child theme [Resolved]
In my child-theme functions PHP, I checked to see if the original twentyseventeen_excerpt_more() function has executed, and then give my alternative readmore() function a higher priority. With the higher priority (15), add_filter( 'excerpt_more', 'readmore', 15 ); my function runs first, and the original read more function is ignored in the parent theme.
This is what the function looks like in my child-theme functions.php file:
if ( ! function_exists ( 'twentyseventeen_excerpt_more' ) ) {
function readmore( $link ) {
if ( is_admin() ) {
return $link;
}
$link = sprintf( '<p class="link-more">%2$s</p>',
esc_url( get_permalink( get_the_ID() ) ),
/* translators: %s: Name of current post */
sprintf( __( '[Read More...]<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), get_the_title( get_the_ID() ) )
);
return ' … ' . $link;
}
add_filter( 'excerpt_more', 'readmore', 15 );
}
BTW, the above could also be inserted into a plugin .php file if you would prefer.
I've been trying to add an endpoint for the shop page using this code:
add_action( 'init', 'add_city_endpoint' );
function add_city_endpoint() {
add_rewrite_endpoint( 'city', EP_PAGES );
}
to get products filtered when url is something like: /shop/city/new-york/
But I get page with no products.
How can I make it work?
Alright, I'll answer my own question.
Since the shop page is not an actual wordpress page, but an archive page for "product" post type, the endpoints don't work well for my purpose. And the proper way would be to use add_rewrite_rule instead:
add_action( 'init', 'city_add_rewrite_rules' );
function city_add_rewrite_rules() {
$shop_page = ( $shop_page_id = wc_get_page_id( 'shop' ) ) && get_post( $shop_page_id ) ? get_page_uri( $shop_page_id ) : 'shop';
add_rewrite_tag( '%sr_city%', '([^&]+)' );
add_rewrite_rule(
"^$shop_page/city/([^/]+)/?$", 'index.php?post_type=product&sr_city=$matches[1]', 'top'
);
//pagination
add_rewrite_rule(
"^$shop_page/city/([^/]+)/page/([0-9]+)?$", 'index.php?post_type=product&sr_city=$matches[1]&paged=$matches[2]', 'top'
);
}
I'm trying to add images sizes on my wordpress site. I searched alot and tried too many solutions but couldn't work for me can anyone help me on this, it will be appreciatable. Thanks in advance. I have added this code in my functions.php file
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'slider_image_desktop' => __( 'slider_image_desktop' ),
) );
}
add_action( 'after_setup_theme', 'wpse_setup_theme' );
function wpse_setup_theme() {
add_theme_support( 'post-thumbnails' );
add_image_size( 'slider_image_desktop2', 60, 60, true );
}
Thanks everyone i solved my problem. I changed my some lines of code to
add_action( 'after_setup_theme', 'wpse_setup_theme' );
function wpse_setup_theme() {
add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'slider_image_desktop2', 60, 60, true );
}
}
It made the thumbnail then for retrieving i didn't use function for get image thumb because i am using Advanced Custom Fields so in wp admin in my acf fields group i just checked my image uploader's return value as image array and i just got full array of the uploaded image with my defined size. there was no need to use wp_get_attachment_image_src or wp_get_attachment_image function to fetch the image..
Thanks everyone for your help may this answer will help someone who will have been the same problem...
Try This:
$attachment_id = get_field('field_name');
$size = "slider_image_desktop2"; // (thumbnail, medium, large, full or custom size)
$image = wp_get_attachment_image_src( $attachment_id, $size );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img class="image-class" alt="" src="<?php echo $image[0]; ?>" />
<?php
just copy and paste on your theme function.php file
add_image_size( 'img-cropped', 198, 198, true );// you can change the size
Your selected self answer was an absolute life saver, and got me to the point of what I was trying to do - but I had to make one small addition to get the custom image size in the backend page editor "add media" options:
function nmg_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'social-icons' => __('Social Icon'),
) );
}
add_action( 'after_setup_theme', 'nmg_setup_theme' );
function nmg_setup_theme() {
add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_image_size' ) ) {
add_image_size('social-icons', 9999, 60, false);
}
add_filter( 'image_size_names_choose', 'nmg_custom_sizes' );
}
It's your function, but with the function to add the custom size to image_size_names_choose - but after theme setup (what was stopping it from working for me before).
Might be useful to someone...
In my functions.php file I have some remove_actions and add_filters that run for woocommerce but the problem is these functions run for all woocommerce product types.
I'd like to wrap a simple if statement around the hooks/filters I have to only run for grouped product pages the problem is I dont know how woocommerce refers to these pages heres what I have at the moment.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
Heres what i'd like to do but I dont know the correct reference for $grouped_product.
if ($grouped_product) {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
I have two add_filter and one remove action i'd like to append in my functions.php to only execute on grouped product pages I just need the correct reference in the first set of brackets in the second code block above.
Tried this code but it doesn't work..
if (is_product() and $product->is_type('grouped')) {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
functions php file
<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
//Remove cart options from under short description.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
//Filter below adds new tab and returns cart options within tab.
add_filter( 'woocommerce_product_tabs', 'woo_paym_product_tab' );
function woo_paym_product_tab( $tabs ) {
// Adds the new tab
$tabs['paym-plans'] = array( 'title' => __( 'Contract Deals', 'woocommerce' ), 'priority' => 10, 'callback' => 'woo_paym_product_tab_content' );
return $tabs;
}
function woo_paym_product_tab_content() {
// The new tab content
woocommerce_template_single_add_to_cart();
}
//Filter below changes tab priority to display price plans first.
add_filter( 'woocommerce_product_tabs', 'sb_woo_move_description_tab', 98);
function sb_woo_move_description_tab($tabs) {
$tabs['paym-plans']['priority'] = 10;
$tabs['description']['priority'] = 20;
$tabs['additional_information']['priority'] = 30;
return $tabs;
}
?>
Solved the problem trick was to change it to a filter.
add_filter( 'woocommerce_single_product_summary', 'filter_grouped_cart');
function filter_grouped_cart(){
global $post;
if( function_exists('get_product') ){
$product = get_product( $post->ID );
if( $product->is_type( 'grouped' ) ){
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
}
}
Checking $product->is_type('grouped') will not help here...
Please check if the code provides any help to you..
global $post;
if( $post->post_parent != 0 ){
echo 'is part of a group';
}