I wanted to remove "Description" tab and word "Description" from my product page, but keep description content. I've done it (like I wanted). But now the top of the page is "frozen". It is not possible to click on photos, click on the "add to cart" button, and switch the currency. Link to the page: https://www.c60powder.com/product/c60/
What is the problem? What did I do wrong?
I've used that code in my functions.php:
add_filter( 'woocommerce_product_tabs', 'remove_woocommerce_product_tabs', 98 );
function remove_woocommerce_product_tabs( $tabs ) {
unset( $tabs['description'] );
unset( $tabs['reviews'] );
unset( $tabs['additional_information'] );
return $tabs;
}
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_product_description_tab' );
add_filter('woocommerce_product_description_heading', '__return_empty_string');
P.S. It works OK on mobile.
.woocommerce-tabs.wc-tabs-wrapper {
margin: 0 !important;
padding: 0 !important;
height: 0;
visibility: hidden !important;
opacity: 0;
width: 0% !important;
display: block !important;
}
Related
I want to add 'continue shopping' / 'add product' link before order review on checkout page. But I want it to be inline with "Your order" text.
See this screenshot: https://ibb.co/47f6vd7
I tried this code:
add_action('woocommerce_checkout_order_review','woocommerce_checkout_before_order_review_add_product');
function woocommerce_checkout_before_order_review_add_product(){
$continue_shopping_url = wc_get_page_permalink( 'shop' );
$add_product_label = 'add product';
if(!empty($continue_shopping_url)){
echo "$add_product_label";
}
}
But it show on the line below "Your order" text. So it looks ugly.
How do i make it inline with "Your order" text using additional css?
First of all you are using the wrong hook.
While woocommerce_checkout_order_review will cause the text to be added insde the #order_review div, the woocommerce_checkout_before_order_review hook will cause it to be placed before the #order_review div.
So you get:
function action_woocommerce_checkout_before_order_review(){
$continue_shopping_url = wc_get_page_permalink( 'shop' );
$add_product_label = 'add product';
if ( ! empty ( $continue_shopping_url ) ) {
echo '<div class="my-label">' . $add_product_label . '</div>';
}
}
add_action( 'woocommerce_checkout_before_order_review', 'action_woocommerce_checkout_before_order_review', 10, 0 );
Which CSS you will have to apply for this is completely theme dependent,
but using display: inline-block; can certainly come in handy
Make sure you have a child theme setup. You can then add the 'Continue shopping' link via the woocommerce_checkout_before_order_review action hook:
add_action( 'woocommerce_checkout_before_order_review', 'woocommerce_checkout_add_continue_shopping_link' );
function woocommerce_checkout_add_continue_shopping_link() {
printf( 'Continue shopping', wc_get_page_permalink( 'shop' ) );
}
Add the above code snippet to the functions.php of your child theme. Then take care of the CSS styling in the style.css of your child theme.
For instance like this:
body.woocommerce-checkout h3#order_review_heading {
float: left;
width: auto;
}
body.woocommerce-checkout a.checkout-continue-shopping {
font-size: 0.8em;
float: left;
padding: 0.5em 1em;
background: #444;
text-decoration: none;
color: white;
margin-left: 2em;
margin-top: 0.25em;
}
Which will give you the following result:
You will probably also have to add some CSS media queries to make this look good on mobile and tablet.
I tried to add a logo to the admin menu as a menu item background image, but it seems not the best approach because when I try to add padding or margins to it, its position change and do not fit correctly, as shown in the image:
https://i.stack.imgur.com/ZpH3q.png
And I used the following code:
/********************************************************/
/* INSERT ADMIN LOGO
/********************************************************/
add_action('admin_menu', 'shomtek_admin_menu');
function shomtek_admin_menu() {
global $menu;
$url = 'https://google.com/';
$menu[0] = array( __('SHOMTek'), 'read', $url, 'shomtek-logo', 'shomtek-logo');
}
/*ADMIN LOGO STYLES*/
#adminmenu a.shomtek-logo{
display: block;
background: url(https://example.com/logo.svg) no-repeat center center;
background-size: 140px 40px;
width: 140px;
opacity: 1;
height: 40px;
margin: 0 auto;
padding-top: 20px;
}
Can you please recommend the best approach to add a logo to the top of wordpress admin menu?
Thanks
Follow these steps:
1- Create a menu on the top of the side menu:
add_action( 'admin_menu', 'register_my_custom_menu_page' );
function register_my_custom_menu_page() {
add_menu_page( 'Custom Menu Page Title', 'Custom Menu Page', 'manage_options', 'logo_based_menu', '', '', 1);
}
2- Add custom CSS code to print the logo inside that menu:
function admin_style() {
echo '<style>
#toplevel_page_logo_based_menu {
background-image: url('. get_field ("option", "logo_image") . ');
}
#toplevel_page_logo_based_menu > a, #toplevel_page_logo_based_menu > a > div.wp-menu-image {
display: none;
}
</style>';
}
add_action('admin_enqueue_scripts', 'admin_style');
I am using the WooCommerce 3.4.4 version and I am trying to edit the notice message when you press the "X" button to remove the product from the cart page.
Currently the notice is "<product name>" removed. Undo?
I want to remove the quotations and change the message to Product name has been removed. [Undo button]
I have managed to remove the quotation marks from the product name by writing
add_filter( 'woocommerce_cart_item_removed_title', 'removed_from_cart', 10, 2);
function removed_from_cart( $message, $product_data ) {
$product = get_the_title($product_data['product_id']);
$message = $product;
return $message;
}
But I am a bit confused on how to do the rest of the edits. Any help is appreciated.
Updated
The only available hook is woocommerce_cart_item_removed_title that you are using already. and displays the product name between quotes. You can also use gettex filter hook to remove the ? after "Undo" text:
add_filter( 'woocommerce_cart_item_removed_title', 'removed_from_cart_title', 12, 2);
function removed_from_cart_title( $message, $cart_item ) {
$product = wc_get_product( $cart_item['product_id'] );
if( $product )
$message = sprintf( __('Product %s has been'), $product->get_name() );
return $message;
}
add_filter('gettext', 'cart_undo_translation', 35, 3 );
function cart_undo_translation( $translation, $text, $domain ) {
if( $text === 'Undo?' ) {
$translation = __( 'Undo', $domain );
}
return $translation;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
But you can not change or add button tag class the the <a> html tag…
Instead use the existing restore-item tag class adding some custom CSS styles to it.
Below some CSS styles example, that you can add to the styles.css file of your active child theme:
.woocommerce-message .restore-item, {
float: right;
padding: 0 0 0 1em;
background: 0 0;
color: #fff;
box-shadow: none;
line-height: 1.618;
border-width: 0 0 0 1px;
border-left-style: solid;
border-left-color: rgba(255,255,255,.25)!important;
border-radius: 0;
}
.woocommerce-message .restore-item:hover {
background: 0 0;
color: #fff;
opacity: .8;
}
This is what you will get:
I'm trying to do a hook to change the style of the buy button when the product is without stock.
I have done something like this, but without success.
do_action( 'woocommerce_no_stock', $product );
function action_woocommerce_no_stock( $product ) { ?>
<style>
.btn-assine {
background: blue;
}
</style>
<?php
};
add_action( 'woocommerce_no_stock', 'action_woocommerce_no_stock');
Usually Woocommerce removes the button if the product is out-of-stock. If your product settings is allowing backorders then you'll see the button and probably the CSS class for this button will be different from the others.
Please Try Below Code.
do_action( 'woocommerce_no_stock', $product );
function action_woocommerce_no_stock( $product ) {
echo '
<style type="text/css">
.single-product .product .single_add_to_cart_button.button{
background-color: #333333;
color: #FFFFFF;
}
.woocommerce .product .add_to_cart_button.button{
background-color: #333333;
color: #FFFFFF;
}
</style>
';
};
add_action( 'woocommerce_no_stock', 'action_woocommerce_no_stock', 10, 1 );
I want to add a second add to cart button at the end of the page on my woocommerce product description.
how do I do this?
Thank you so much for your time!
Method-1
$id = get_the_ID();
echo do_shortcode( '[add_to_cart id='.$id.']' );
Method-2
$product = get_product(get_the_ID());
echo "<a href='".$product->add_to_cart_url()."'>add to cart</a>";
Would you please add above code end of the woocommerce product description?
Method-3
Add below code in your active theme functions.php.
add_action( 'woocommerce_single_product_summary', 'custom_button_after_product_summary', 30 );
function custom_button_after_product_summary() {
global $product;
echo "<a href='".$product->add_to_cart_url()."'>add to cart</a>";
}
1. Solution: Add code in your theme's function.php file.
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );
function my_extra_button_on_product_page() {
global $product;
echo 'Add to cart';
}
2. Solution: Install Custom WooCommerce Add to Cart plugin
Custom WooCommerce Add to Cart Plugin
3. Solution: You can use hooks with shortcodes:
Custom add to cart button
Or create overrides for WooCommerce files in your own template.
Solution: Add code in your active theme functions.php.
// Add "Add To Cart" button //
add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button2', 13 );
function add_a_custom_button2() {
global $product;
// Not for variable and grouped products that doesn't have an "add to cart" button
if( $product->is_type('variable') || $product->is_type('grouped') ) return;
// Output the custom button linked to the product
echo '<div style="margin-bottom:10px;">
<a class="customviewaddtocartbutton" href="' . esc_attr( $product->add_to_cart_url() ) . '">' . __('Add To Cart') . '</a>
</div>';
}
Styling: Add Code in your child-theme.css or theme.css
/* Custom Add To Cart Button */
.customviewaddtocartbutton {
display: block !important;
width: 100% !important;
border: none !important;
background-color: #E6723F !important;
color: white !important;
padding: 2px 2px !important;
font-size: 16px !important;
cursor: pointer !important;
text-align: center !important;
border-radius: 30px !important;
}
.customviewaddtocartbutton:hover {
background-color: #246e4c !important;
color: white !important;
cursor: pointer !important;
}