Gift Card hooks

This topic has 24 replies, 2 voices, and was last updated 6 years, 1 month ago by Harry.

Viewing 21 reply threads

Save

Author

Posts
- September 20, 2018 at 6:54 pm #24873
  
  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.
- September 20, 2018 at 8:58 pm #24880
  
  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
  - September 20, 2018 at 9:12 pm #24882
    
    Mag8891
    
    This reply has been marked as private.
- September 20, 2018 at 10:49 pm #24891
  
  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
- September 20, 2018 at 10:53 pm #24892
  
  Mag8891
  
  This reply has been marked as private.
- September 20, 2018 at 11:01 pm #24894
  
  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
  - September 21, 2018 at 12:16 am #24896
    
    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
- September 21, 2018 at 2:36 am #24900
  
  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*/
- September 21, 2018 at 10:25 am #24906
  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
- September 21, 2018 at 5:06 pm #24917
  
  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.
- September 21, 2018 at 5:43 pm #24920
  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
- September 21, 2018 at 8:37 pm #24925
  
  Mag8891
  
  This reply has been marked as private.
- September 21, 2018 at 11:25 pm #24935
  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
- September 22, 2018 at 1:39 am #24938
  
  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;
  }
- September 22, 2018 at 11:02 am #24945
  
  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
- September 22, 2018 at 2:14 pm #24953
  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;
    }}
- September 22, 2018 at 4:14 pm #24959
  
  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
  - September 22, 2018 at 4:18 pm #24961
    
    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.
- September 22, 2018 at 4:55 pm #24964
  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
- September 22, 2018 at 5:14 pm #24965
  
  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;
  }
- September 22, 2018 at 5:35 pm #24966
  
  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
- September 22, 2018 at 5:58 pm #24968
  
  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?
- September 22, 2018 at 11:04 pm #24974
  
  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
- November 4, 2018 at 1:15 am #26279
  
  Mag8891
  
  This reply has been marked as private.
- November 4, 2018 at 10:20 am #26287
  
  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

Viewing 21 reply threads

Save

You must be logged in to reply to this topic.

Menu

Support Forum

Attachments:

Attachments:

Attachments: