Product Page – edits

This topic has 23 replies, 3 voices, and was last updated 5 years, 2 months ago by Artem Temos.

Viewing 24 posts - 1 through 24 (of 24 total)

Author

Posts
June 6, 2019 at 11:39 pm #127465

newK9
Participant

Hi could you please advise or point me in how I would increase the length of the add to cart button?

Also how would I move the add to wishlist button below the add to cart button. I’ve tried to illustrate what I mean below for you.

Thank you for your help.

Attachments:
You must be logged in to view attached files.

June 7, 2019 at 6:59 am #127499
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
body .product-image-summary .single_add_to_cart_button {
    width: 100%;
}
```
Best Regards
June 7, 2019 at 12:05 pm #127562

newK9
Participant

Thank you. The code has only worked on desktop not mobile.

Also how would I move the add to wishlist button below the add to cart button.

June 7, 2019 at 1:31 pm #127580

Elise Noromit
Member

Hello,

Please provide your site URL and admin access for checking.

Best Regards

June 7, 2019 at 1:47 pm #127585

newK9
Participant

Thank you, details enclosed

June 7, 2019 at 3:35 pm #127599

Elise Noromit
Member

Hello,

The code is workable. You need to increase the width and put the code to the Theme Settings > Custom CSS > Mobile: https://gyazo.com/be9966346b567efb26304afdce980e7d

Add to wishlist is not possible to add right under Add to cart button.

Best Regards

June 7, 2019 at 6:50 pm #127623

newK9
Participant

Where would I find the file to edit the product page to change the layout?

Could I edit this and place it into the child theme?

June 8, 2019 at 8:26 am #127648
Elise Noromit
Member
Hello,

You can search the file in this folder wp-content/plugins/woocommerce/templates/single-product/

Add this code to the Theme Settings > Custom CSS > Mobile:
```
body .product-image-summary .single_add_to_cart_button {
    width: 100%;
}
```
Best Regards
June 8, 2019 at 1:21 pm #127677

newK9
Participant

Where you have said

Add to wishlist is not possible to add right under Add to cart button.

It is possible to get the wishlist below the add to cart button, when you don’t use the “After Add to cart button” text area“. That said, I still want to use the After Add to cart button text area but would like to move it’s location to just under the wishlist section. Currently the block appears just above wishlists and just below add to cart section. Could you advise me how to just drop this area just below.

Thank you for your time and help.

June 9, 2019 at 8:37 am #127716

Elise Noromit
Member

Hello,

You can use the area before “add to cart” button and the wishlist will get right below the button.

Best Regards

June 9, 2019 at 12:39 pm #127741

newK9
Participant

Thank you for replying back to me.

I don’t want to add the content into the before “add to cart” button but rather add them to the after “add to cart” button, which is after the wishlist section. Can I not move the after “add to cart” button section just below in the code? Like highlighted in the image below. This would make more sense. Although I’m struggling to locate how to do this.

Thank you for your time

Attachments:
You must be logged in to view attached files.

June 10, 2019 at 6:30 am #127793
Artem Temos
Keymaster
Try to add the following PHP code snippet to the child theme functions.php file to do this
```
remove_action( 'woocommerce_single_product_summary', 'woodmart_after_add_to_cart_area', 31 );
add_action( 'woocommerce_single_product_summary', 'woodmart_after_add_to_cart_area', 38 );
```
June 10, 2019 at 2:51 pm #127880

newK9
Participant

Hi Artem, Thank you. It has partially worked. I’ve added the code to the functions file but as you can see it has moved but still the other block appears.

Attachments:
You must be logged in to view attached files.

June 11, 2019 at 5:56 am #127955

Artem Temos
Keymaster

Please, disable all external plugins and send us your FTP access so we can check what is wrong there.

June 11, 2019 at 2:58 pm #128074

newK9
Participant

I’ve disabled plugins still problem is seen.

June 12, 2019 at 6:34 am #128122
Artem Temos
Keymaster
Try to replace with this code instead
```
function chage_after_add_to_cart_position() {
	remove_action( 'woocommerce_single_product_summary', 'woodmart_after_add_to_cart_area', 31 );
	add_action( 'woocommerce_single_product_summary', 'woodmart_after_add_to_cart_area', 38 );
}

add_action( 'init', 'chage_after_add_to_cart_position' );
```
July 7, 2019 at 2:12 pm #131658
newK9
Participant
Hi. I’ve hidden a category in the woocommerce sidebar widget using this code.
```
add_filter( 'woocommerce_product_categories_widget_args', 'organicweb_exclude_widget_category' );
function organicweb_exclude_widget_category( $args ) {
        $args['exclude'] = array('30' );
        return $args;
}
```
Yet I’m struggling to work out how to remove/hide one specific category from appearing in the category meta section on a product page.
July 8, 2019 at 5:54 am #131705

Artem Temos
Keymaster

Sorry, but we don’t have an instruction for such customization.

October 5, 2019 at 6:48 pm #148628

newK9
Participant

Hi the code in post https://xtemos.com/forums/topic/product-page-edits/#post-127648

to extend the add to cart button is not working on mobile devices. I’ve put the code into global settings and this has worked for desktop but not mobile. Any reasons why?

October 6, 2019 at 1:39 pm #148674

Artem Temos
Keymaster

Hello,

I’m checking your product page and see that the code is applied on mobile devices too https://gyazo.com/3e73b36c8644c9e1ff758d915caca272

Kind Regards

October 6, 2019 at 2:08 pm #148681

newK9
Participant

Hi Artem your right it is working on google chrome developers tools like that but actually on a mobile device (Chrome and Safari) it is not, which is weird. Image provided below of how it is actually displaying.

Attachments:
You must be logged in to view attached files.

October 6, 2019 at 2:16 pm #148683

Artem Temos
Keymaster

Try to increase the value from 40% to 60% for example and check the difference.

October 6, 2019 at 2:18 pm #148685

newK9
Participant

Hi Artem, Already tried that and still the button doesn’t change size on actual mobile devices, remains small.

October 6, 2019 at 2:47 pm #148695

Artem Temos
Keymaster

When we test this with a real mobile device and looks correctly https://gyazo.com/688c4652fd53fc916f04617afb9eaa72
Author

Posts