Clua Yith gift card

[Mag8891]

hello could you please help me to edit product page style to work with yith gift card plugin correctly,

firstly the wish list heart is for some reason jumped to the second line,

second Gift this product button in bold as button frame, how Can I make it the same stuly as other claue buttons ie not bold, the hoover color doesn’t work the same too

Also placed in between add to cart and wish list hart, so on mobile it is on the second line too, how can I place this button after the heart

Please see the pic how I would like to see it on mobile and full screen

Thank you

Attachments:

You must be logged in to view attached files.

[Mag8891]

also on the checkout how I can make the notice the same style as your theme

Attachments:

You must be logged in to view attached files.

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

1. Please add below code

button#give-as-present {
	margin: 0 0 0 10px !important;
	border: 1px solid;
	font-weight: normal;
}
@media only screen and (max-width: 800px) {
button#give-as-present {
	margin: 0 !important;
}}

the position of gift button control by code of plugin and i can’t control

2. I check and see the message bar on your site still work like our demo site. Could you add note to screenshot what you want

3. Please add below css code

.terms-privacy-conditions #terms {
	float: left;
	margin-top: 8px;
	margin-right: 8px;
}

4. I try some ways but can’t move coupon box like your screenshot. It now only under Place Order button because WooCommerce doesn’t add action hook below products review table

5. Please add below code

.vbox-inline .popup-footer a.btn#agree_terms_button {
padding: 0 30px;
}

6. This option generate by WooCommerce plugin, can’t change the picture you can remove paypal link and change space by add below code

.payment_method_paypal a.about_paypal {pointer-events: none; marign-left: 10px;}

7. Please add below code

.actions .coupon input {
	margin: 10px 0;
}
.actions .coupon .button {
	width: 100%;
}

8. Please add below code

.jas-sticky-atc button#give-as-present {
	margin: 0 !important;
	background: none;
	border: none;
	color: #fff;
	font-weight: normal;
	text-transform: uppercase;
	padding: 0 15px;
	font-size: 12px;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

1. Please use below code

.ywgc-have-code {
background-color: #d9edf7;
border: 1px solid #bce8f1;
color: #31708f;
}

4. Please refer this topic and add recommend code to claue-child > functions.php. I love the concept of OpenCart or other e-commerce for coupon form on checkout page. it easier for user to use the Coupon code but WooCommerce not flexible to customize this

7. Please add below code

.actions .coupon input {
	margin: 10px;
}

8. Could you send me link of this product, I check Gift Card product it not show.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

1. Please change prev code to

.ywgc-have-code {
	background-color: #d9edf7;
	border: 1px solid #bce8f1;
	color: #31708f;
	padding: 30px 50px;
}

4. Sorry forgot give you link of topic, please follow this https://tamstradingpost.com/move-the-woocommerce-coupon-field-anywhere/ to move coupon on checkout page.

On the cart page, please contact plugin author YITH Giftcard for help.

6. Please change code to

.payment_method_paypal a.about_paypal {display: none;}

7. Please change prev code to

.actions .coupon input {
   margin: 0 10px;
}
@media only screen and (max-width: 736px) {
.actions .coupon input {
   margin: 10px 0;
}}

8. Please add below code

.jas-sticky-atc .ywgc-generator {display: none !important;}

9. Please add below code

button#give-as-present {
	padding: 0 20px;
}
.product-quickview .single_add_to_cart_button {
	padding: 0px 19px;
	font-size: 12px;
}
.product-quickview button#give-as-present {
	padding: 0px 15px;
	font-size: 12px;
}
@media only screen and (min-width: 801px) {
.product-quickview .jas-col-md-5,
.product-quickview .jas-col-md-7 {
	flex-basis: 50%;
       max-width: 50%;
}}
@media only screen and (max-width: 800px) {
button#give-as-present {
	margin: 0 0 !important;
}}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

1. Please add below code

.ywgc-have-code + .ywgc-enter-code {
	margin-top: 10px;
	margin-bottom: 0;
	background: #f1f1f1;
	padding: 20px;
	display: inline-block;
	width: 100%;
}
#giftcard_code {
	margin-right: 10px;
}
.ywgc-enter-code p { margin-bottom: 0;}

@media only screen and (max-width: 414px) {
	.woocommerce form .form-row-first, 
	.woocommerce form .form-row-last,
       .ywgc-enter-code .form-row,
.woocommerce form .form-row button,
.checkout_coupon .input-text,
.ywgc-enter-code .form-row .input-text,
.ywgc-enter-code .form-row button {
		width: 100%;
	}
.ywgc-enter-code .form-row { margin-bottom: 10px;}

}

9. Please change code to

button#give-as-present {
	padding: 0 15px;
}
.product-quickview .single_add_to_cart_button {
	padding: 0px 15px;
	font-size: 12px;
}
.product-quickview button#give-as-present {
	padding: 0px 15px;
	font-size: 12px;
}
@media only screen and (min-width: 801px) {
.product-quickview .jas-col-md-5,
.product-quickview .jas-col-md-7 {
	flex-basis: 50%;
       max-width: 50%;
}}
@media only screen and (max-width: 800px) {
button#give-as-present {
	margin: 0 0 !important;
}}

I check your site on mobile it work well http://take.ms/VIX5F

4. It can’t add on over the Order heading.

On cart page woocommerce they use HTML code to put coupon under product list but on checkout they use PHP function to hook. So it hard to control

6. Please change code to

.payment_method_paypal a.about_paypal {pointer-events: none; margin-left: 10px;}

the text “marign-left” wrong correct is “margin-left”

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Mag8891]

on question 4 I received a reply from Woocommerce topic above they give this article https://hollerwp.com/customize-woocommerce-checkout-page/ , and it seems that there is a lot of hooks,

Do you think it is possible to use the hooks in red to move coupon field?

thank you

Attachments:

You must be logged in to view attached files.

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

1. Please change code to

.ywgc-have-code + .ywgc-enter-code {
margin-top: 10px;
margin-bottom: 0;
background: #f1f1f1;
padding: 20px;
display: inline-block;
width: 100%;
}
#giftcard_code {
margin-right: 10px;
}
.ywgc-enter-code p { margin-bottom: 0;}

@media only screen and (max-width: 414px) {
.woocommerce form .form-row-first, 
.woocommerce form .form-row-last,
.ywgc-enter-code .form-row,
.woocommerce form .form-row button,
.checkout_coupon .input-text,
.ywgc-enter-code .form-row .button {
	width: 100%;
}
.ywgc-enter-code .form-row { 
margin-bottom: 10px;
}
#giftcard_code {
max-width: 100% !important;
margin-right: 0 !important;
margin-bottom: 10px;
}
}

9. Please change code to

button#give-as-present {
	margin: 0 0 0 10px !important;
	border: 1px solid;
	font-weight: bold;
        text-transform: uppercase;
}
button#give-as-present {
	padding: 0 15px;
}
.product-quickview .single_add_to_cart_button {
	padding: 0px 15px;
	font-size: 12px;
}
.product-quickview button#give-as-present {
	padding: 0px 15px;
	font-size: 12px;
}
@media only screen and (max-width: 1024px) and (min-width: 900px){
.single_add_to_cart_button {
	padding: 0px 15px;
	font-size: 12px;
}
button#give-as-present {
	padding: 0px 15px;
	font-size: 12px;
}
}
@media only screen and (min-width: 801px) {
.product-quickview .jas-col-md-5,
.product-quickview .jas-col-md-7 {
	flex-basis: 50%;
       max-width: 50%;
}}
@media only screen and (max-width: 800px) {
button#give-as-present {
	margin: 0 0 !important;
}}

For duplicate gift forms please add below code

.btn-atc .ywgc-generator + .ywgc-generator, .jas-sticky-atc #give-as-present {display: none;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

4. Please remove the code i suggested and try add below code to fucntions.php in claue-child

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form' );

9. Please change code to

.btn-atc .ywgc-generator + .ywgc-generator, .jas-sticky-atc #give-as-present {display: none !important;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

For coupon form i recommend choose option 1. For option 2,3 it better for user but have issue with WooCommerce it can’t control. I think we have to report this issue with WooCommerce team.

9. I check product cyan-boheme it still work well on my computer http://take.ms/L2B7h

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Mag8891]

I don’t know how do you find out that coupon form is called woocommerce_checkout_coupon_form, I use firefox inspect or chrome, and don’t seem to see this name. thank you

[Harry]

Hi,

1. Could you ask plugin author function to generate gift card on checkout page. I will suggest you code to move

9. Could you please choose product page layout style you will choose for your site and make sure you show sidebar on product detail page, I can’t take care all product layout.

10. The function is default of WooCommerce you can find in plugins > WooCommerce > includes > wc-template-hooks.php

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Harry]

Yes, you can use different layout for product like our demo, but i need your what do you want do for your live site.

Some days ago i style for gift button when product layout without sidebar, now you show sidebar for product detail page. the content now narrow and position of button change.

Please download new version of Claue. We have change some code it affect to wishlist button position.

Please install new package. After that i will check and help you style for gift cart button again.

10. Please add below code to remove quick-view for gift card product

.product-type-gift-card .product-btn .btn-quickview {display: none;}

Thanks and best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

hi, OK I understand, yes I want to have sidebar on my products but I test all plugins one by one, to understand  easier if something goes wrong, I didn’t finish testing the sidebar Accordion menu plugin yet.

 

and sorry I don’t see the update, in my admin it doesn’t show update notice and on themeforest didn’t send me update email too.

I have went to themeforest and downloaded all files again. then uploaded claue theme content via ftp to my  wp-content/themes/claue  but it still show old version in admin 1.4.0

Also tried to install new package through admin but it says that

Destination folder already exists. /var/www/cclub/wp-content/themes/claue/

Theme installation failed.

I your guide you wrote Install it to different folder http://support.janstudio.net/forums/topic/updating-the-theme/

but I don’t understand how to install in different folder, sorry

So not sure, could you please check if update is available to download? which version it should say then?

I checked the downloaded claue folder and last files seems to be edited before 03.06.18

Thank you

Many thanks.

[Harry]

This reply has been marked as private.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

1. Sorry we still keep version 1.4.0 it now update for only you and we have some fix for the next update. So now you can use new version and when have update new version 1.4.1 on ThemeForest you can update auto. I update on your site, please download new attach file

Please add new code

.woocommerce-variation-add-to-cart button#give-as-present {margin-top: 10px;}

2. I check function of gift card generate gift card code on cart page and checkout page https://monosnap.com/file/D31iPNSfIc58S5WHbPGRgxT2FDSz1i in file plugins/yith-woocommerce-gift-cards.premium/lib/class-yith-ywgc-frontend.php Please ask plugin author how to override

3. I checked with default theme but dont’ see quick view plugin work. What do you want to do with quick view?

Attachments:

You must be logged in to view attached files.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Mag8891]

so front page not working and new quick view looks like attached – looks like you trying to move wish list button before add to cart? it is a good idea! I don’t need yith quick view if we can correct claue quick view work OK for all products.

Attachments:

You must be logged in to view attached files.

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

1. The issue on homepage because you don’t activate plugin BakeryPage Buidler

2. Could you tell me step one by one when you update theme. This have issue with WordPress when user change theme, they have to re-arrange widgets

3. I move wishlist next to add cart in code to easy control position with css

9. We override function of Wishlist plugin to match with design so you can’t use setting option after thumbnail, after description

9.b I check with our theme it still work http://take.ms/sqwX9

9.c Please add below code

.product-type-gift-card .yith-wcwl-add-to-wishlist {display: none;}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Harry]

3. Please add more code

.woocommerce-variation-add-to-cart #give-as-present {margin: 10px 0;}

I check again but don’t see the product have all button on the same line, maybe cache on your site

9. b, you still use old code in claue-child > function.php

9.c It now error javascript on your site

So can’t add product to wishlist

10. Please add below code

.ywgc-have-code {
padding: 30px 50px;
background-color: #d9edf7;
border: 1px solid #bce8f1;
color: #31708f;
margin-bottom: 30px;
}

.ywpar_apply_discounts_container {
margin-top: -30px;
margin-bottom: 0;
background: #f1f1f1;
padding: 20px;
width: 100%;
}

.woocommerce-cart-notice-minimum-amount.woocommerce-info {
margin-top: 30px;
display: inline-block;
}

The HTML code of Apply Discount box different with coupon and giftcard so can’t style like above box.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

3. This issue because have code

button#give-as-present {
margin: 0 0 0 0 !important;
border: 1px solid;
font-weight: bold;
text-transform: uppercase;
}

Please remove value margin: 0 0 0 0 !important;

and Please add new code on bottom of custom css field don’t put on top

Please remove code

@media only screen and (max-width: 800px) {
button#give-as-present {
	margin: 0 0 !important;
}}

and add new code

.product-quickview button#give-as-present {
    margin-left: 10px;
    margin-bottom: 0;
    margin-top: 0;
}

3b. I help you formatted code

9b. I see you change the link of login add class of login so it can’t work

$output .= '<li><a class="db cg chp woo-login-popup-sc-open" href="#">' . esc_html__( 'Login', 'claue' ) . '</a></li>';

the correct code is

$output .= '<li><a class="db cg chp" href="' . esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ) . '">' . esc_html__( 'Login / Register', 'claue' ) . '</a></li>';

because your site don’t use plugin to support login as popup/

9c. Please deactivate plugin one by one and check again.

10. I help you fixed code in Custom CSS, please copy code of child theme.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

Hi,

3. Sorry added new code at the end as advised but quick view still stick buttons, could you edit in my custon CSS as I don’t know what I am doing wrong. it appears all in 1 line but then drops to sticky buttons. check this product Grey Beanie layout 1

9b Thank you for correcting it! but I didn’t change that it was how in this topic http://support.janstudio.net/forums/topic/add-new-menu-on-account-icon/

so maybe you need to correct there as well in case somebody else will find it like I did.

Do you mean ? this plugin YITH WooCommerce Popup Premium  I think I have it activated, but not tested it yet.

 

10 it now looks like attached, can I reduce space above and below Apply Discount field?

There is a mall difference of how coupon and gift card field appear. When I click coupon field it slides below blue coupon notice. But when click gift it slides a little bit on top of blue gift card notice, reducing the blue space, how can I make coupon field to do the same when the grey field paper for it to reduce the blue coupon field a little too, so when they both are opened they look the same blue height?

thank you

Attachments:

You must be logged in to view attached files.

[Mag8891]

10 OK, I found how to edit some margins. But please see revised pic 10 attached.

On mobile as well how can I make apply discount field and button same width as coupon and gift fields?

Also on login notice form, is it possible to move Lost your password in line with remember me checkbox just to optimize the space?

Attachments:

You must be logged in to view attached files.

[Mag8891]

This reply has been marked as private.

[Mag8891]

3 Actually, I don’t know what it the issue with your demo products but when I created new product /product/test-layout-1-right/  it all the time shows quick view button in single line!

[Harry]

Hi,

3. I check it work well http://take.ms/FxquU

9c. Thanks, i update code on this topic http://support.janstudio.net/forums/topic/add-new-menu-on-account-icon/

No. i mean in this topic http://support.janstudio.net/forums/topic/add-new-menu-on-account-icon/ the user use plugin Popup Login so you use the code it not work

10. Please below code

.ywpar_apply_discounts_container { padding: 0;}
.ywgc-have-code+.ywgc-enter-code { padding: 20px 50px;}
.woocommerce-cart-notice-minimum-amount.woocommerce-info,
.ywpar_apply_discounts .form-row {margin-bottom: 10px;}

@media only screen and (max-width: 480px) {
#ywpar_apply_discounts {width: 100%;}
}

Please remove code you added

.jas-page .woocommerce-form-coupon-toggle .woocommerce-info {
margin-top: -20px;
}

.ywgc-have-code {margin-top: -20px;}

and add new code

.woocommerce-checkout .woocommerce-info {
margin-bottom: 10px;
}
.lost_password {
margin-bottom: 30px;
margin-top: -15px;
}

It can’t move “Lost your password” same line with “Remember me” because the HTML code not support

11. I check this function it doesn’t work. Please contact plugin author to help you override plugin in child theme.

3. Could you explain more about product /prouduct/test-layout-1-right/ it now on quick view all product buttons in a line.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

This reply has been marked as private.

[Harry]

Hi,

Please add the code i suggest to bottom, i will override the css you added. Now you put on top it can’t work. I can’t control when you add css to style for element too.

I will edit in Custom CSS. And you will copy to live and check that easier than now and less code than now.

10. The option 1 can’t do with “Apply Discount” because HTML of this box so i do like option 2. Now I edited code in Theme Option > Custom CSS

11. I check this code http://take.ms/qUCns it doesn’t override by normal action_hook so i suggest you contact plugin author

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Mag8891]

Thank you I will add new code in the end now!

[Author]

Posts