Gift Card hooks

[Mag8891]

Hello Harry,

 

I think we have new updated Gift card plugin and there is now positions to place gift card form on the cart and checkout pages, I have tired them but they need to be corrected to look good with your theme, could you please let me know how I can do the changes as on the pic attached. thank you

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Could you try contact with plugin author for help. Some where need to know plugin’s code to do.

Kind 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 Mag,

This task need more customize, please contact with Freelancer at https://wpkraken.io/ for help.

Kind 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 Mag,

I see you want move position. and i need more customize code and style. I recommend use a freelancer for help.

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

[Mag8891]

where?  on the checkout it is only  to make the gift card entry field same width as coupon field  and same for the apply gift card button on the checkout mobile view, I don’t need to move it anywhere. Remove the blue background and text “Have a coupon? Click here to enter your code”, because I think in settings I chose to hide text show only form see the pic or setting page but it doesn’t work with the theme for some reason. Because I checked with twentyfifteen theme and it work correctly not showing the background and blue color.

On the cart page, you can choose whichever position is easier for you to correct but I think, at the moment it just need to set the correct width for all the coupon entry field and apply coupon button and gift card entry field and button to make them same width, so I don’t need to move anything. And to remove word coupon before coupon entry field.

 

I have managed to delete the text myself,  and I have also managed to edit some things with yellow pencil please see below,

so could you please help me cart mobile view and the checkout view to make it work correctly with the settings.

 

/*cart */
.actions .coupon label{
display: none;
}
#giftcard_code{
width:190px !important;
max-width:100% !important;
margin-right:305px;
margin-left:10px;

}
.ywgc_enter_code div input[type=submit].button{
margin-left:-50px;
margin-right:-50px;
}

@media only screen and (max-width: 768px) {
#giftcard_code{

max-width:130% !important;
margin-right:305px;
margin-left: 0px;
margin-top: 10px;
}}
@media only screen and (max-width: 768px){

.ywgc_enter_code div input[type=submit].button{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}}

/*checkout*/
#giftcard_code{
padding-left:0px;
margin-left:0px;
width:100% !important;
}

.jas-col-xs-12 .ywgc_enter_code div .form-row-last input[type=submit]{
margin-left:0px !important;
}
@media only screen and (max-width: 768px){
.jas-col-xs-12 .ywgc_enter_code div .form-row-last input[type=submit]{
margin-left:0px !important;
width:100% !important;
}}
@media only screen and (max-width: 768px){
#giftcard_code{
margin-buttom:0px;
padding-left:0px;
margin-left:0px;
width:100% !important;
}}

thank you

[Mag8891]

Or like this because when I change checkout the cart page changes too

 

/*cart */
.actions .coupon label{
display: none;
}

.cart tr .button:nth-child(3){
margin-right: 15px;
}

#giftcard_code{
width:190px !important;
max-width:100% !important;
margin-right:305px;

}
.ywgc_enter_code div input[type=submit].button{
margin-left:-50px;
margin-right:-50px;
}

@media only screen and (max-width: 768px) {
#giftcard_code{

width:130% !important;
margin-right:305px;
margin-left: 0px;
margin-top: 10px;
}}
@media only screen and (max-width: 768px){

.ywgc_enter_code div input[type=submit].button{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}}

/*checkout*/

[Harry]

Hi Mag,

Please add more code

.woocommerce-cart .ywgc_enter_code {
	border: none;
	padding: 0;
	margin: 0 0 0 20px;
}
.woocommerce-checkout .ywgc_enter_code { display: inline-block;}
.woocommerce-cart .ywgc_enter_code .form-row {
	padding: 0;
	margin: 0 0 0;
}
.actions .coupon {
	width: calc(100% - 165px);
}
.woocommerce-checkout #order_review {
	margin-top: 90px;
}
.actions .coupon .button {
	white-space: nowrap;
}

@media only screen and (max-width: 736px) {
.woocommerce-cart .ywgc_enter_code {
	margin: 20px 0 35px;
}
.ywgc_enter_code div input[type="submit"].button {
	width: 100%;
}
}

Regards

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

[Mag8891]

hello Harry,

after I input your code the checkout and cart mobile doesn’t look correct size, please see attached

I also added this  code to hide the blue area on the checkout not sure if it is good, please correct if not

/*hide blue have a coupon place holder on checkout*/
.jas-page .woocommerce-checkout .woocommerce-info {
display: none;
}

thank you

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Mag,

Please change code to

.ywgc_enter_code {
	border: none;
	padding: 0;
}
.woocommerce-checkout .ywgc_enter_code div input[type="submit"].button {
	margin-left: 0;
	margin-right: 0;
}
.woocommerce-checkout #giftcard_code {
	width: 100% !important;
}
.woocommerce-cart .ywgc_enter_code {
	border: none;
	padding: 0;
	margin: 0 0 0 20px;
}
.woocommerce-checkout .ywgc_enter_code { display: inline-block;}
.woocommerce-cart .ywgc_enter_code .form-row {
	padding: 0;
	margin: 0 0 0;
}
.actions .coupon {
	width: calc(100% - 165px);
}
.woocommerce-checkout #order_review {
	margin-top: 90px;
}
.actions .coupon .button {
	white-space: nowrap;
}

@media only screen and (max-width: 736px) {
.woocommerce-cart .ywgc_enter_code {
	margin: 20px 0 35px;
}
.ywgc_enter_code div input[type="submit"].button {
	width: 100%;
}
.actions .coupon {
	width: 100%;
}
}

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 Mag,

1. Please change code to

.ywgc_enter_code div input[type="submit"].button {
	width: 100%;
	margin-bottom: 0px;
}

“bottom” not “buttom”

and use code for the image

@media only screen and (max-width: 736px) {
.page-head {
	padding: 50px 0;
}
.jas-page > div {
	margin-top: 60px;
}
.woocommerce-cart-form table {
	margin: 1.5em 0 1.75em;
}
.woocommerce-checkout.mt__60 {
	margin-top: 60px;
}}

and change number add you want.

Regards

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

[Mag8891]

Hi, I can’t seem to find a way to put the apply gift card button higher on the mobile as on the above pic in the middle

below didn’t work

@media only screen and (max-width: 736px) .
.woocommerce-checkout .ywgc_enter_code div input[type=”submit”].button {
margin-top: 0px;
margin-bottom: 0px;
}}

Also I have edited some more margins with code below but it slows down the page loading can I put it in Claue child file instead maybe?

 

/*above Claue related products*/
#tab-description{
padding-bottom:0px;

}

/*margin above product page tabs */
.woocommerce-tabs ul{
margin-top:-49px;
}
.jas-col-md-9 .product .woocommerce-tabs{
padding-top:0px;
}
/*Footer margins*/
#jas-content .jas-wc-single > .jas-container{
margin-bottom:-50px;
}
#jas-footer .footer__top{
padding-bottom:25px;
padding-top:25px;
}

 

[Harry]

Yes,

You can put the code to claue-child > style.css

Regards

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

[Mag8891]

• Hi, and what about margins on the checkout? I can’t seem to find a way to put the apply gift card button higher on the mobile as on the above pic in the middle

  below didn’t work

  @media only screen and (max-width: 736px) .
  .woocommerce-checkout .ywgc_enter_code div input[type=”submit”].button {
  margin-top: 0px;
  margin-bottom: 0px;
  }}

[Harry]

Could you take screenshot what you want which button, i still not clear.

Thanks

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

[Mag8891]

hi sorry please see attached, it is only on mobile checkout on cart is perfect

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Mag,

Please add below code

@media only screen and (max-width: 736px) {
.woocommerce form .form-row input.input-text, 
.woocommerce-checkout #giftcard_code {
	border-radius: 40px;
}
.ywgc_enter_code .form-row {
	padding: 0;
	margin: 0 0 0;
}
.woocommerce form.checkout .woocommerce-form-coupon-toggle + .form-row {
	margin: 0 0 10px;
}}

Regards

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

[Mag8891]

Thank you! Now it all look perfect!

Only question I have tried to move the code below from theme settings to   claue-child > style.css  tosee it it will help load page faster but it doesn’t work from that file for some reason, could you please double check

/*above Claue related products*/
#tab-description{
padding-bottom:0px;

}

/*margin above product page tabs */
.woocommerce-tabs ul{
margin-top:-49px;
}
.jas-col-md-9 .product .woocommerce-tabs{
padding-top:0px;
}
/*Footer margins*/
#jas-content .jas-wc-single > .jas-container{
margin-bottom:-50px;
}
#jas-footer .footer__top{
padding-bottom:25px;
padding-top:25px;
}

[Harry]

Hi Mag,

I don’t see the code in Theme Option and I add the code and it work now.

Kind regards

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

[Mag8891]

hi sorry for confusion I know it work in theme options but I asked you before as soon as I added this code my product page start loading slower, so you said I can try to add it to claue child theme style.css  No?  if I the code in that file and remove from theme settings it doesn’t work, any way I am trying to find a way not to slow down the site, maybe I can edit the main claue file then and will be carefull when updating my theme what do you think?

[Harry]

Hi Mag,

I don’t think css cause site more slower. Could you try check with hosting supporter about performance.

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,

I feel 2 page have same speed, could you try clear cache. On https://one.cre8tive.club/product/variable-test-layout-1-right/ you’re using Alidrop color swatch and on https://cre8tive.club/product/variable-test-layout-1-right/ you’re using the variation swatch plugin integrate with our theme.

Regards

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

[Author]

Posts