Product Template

product-template.html

<div class="product-page">
  [shop_messages]
  <div class="product">
    <div class="product-left">
      <h4>[types field='product-category'][/types]</h4> 
      <h2>[types field='product-name'][/types]</h2>
      <div class="divider"></div>
      <div class="">
        [wpv-view name="products-icon-listing"]
      </div> 
    </div>
    <div class="product-right">
      <div class="head">
      <p>[types field='product-category'][/types]<p>
      <p style='color: #FFF; margin-top: 10px;'>[types field='monthly-pack-paid-trial'][/types]</p>  
      <h3>[types field='product-name'][/types]</h3>
      </div>
      <div class="foot">
        <div class="product-image"><img src="[types field='product-image' size='full' url='true'][/types]"></div>
        [wpv-conditional if="( '[get_product_type product_id="[wpv-post-id]"]' eq 'variable-subscription' )"]
         <h4 style='text-align: center; font-size:20px'> Starts from ₹[wpv-post-field name='_price' index="0"] onwards </h4>
        <style>
          .combined-price
          {
            display: none;
          }
        </style>
        [/wpv-conditional]
        <h4 class='combined-price'>[wpv-woo-product-price]</h4>
        [wpv-conditional if="( [wpv-post-field name="_sale_price"] ne '' )"]
        <!--<h4><del>₹[wpv-post-field name="_regular_price"]</del></h4>
        <h4>₹[wpv-post-field name="_sale_price"]</h4>-->
        <style>
          .woocommerce div.product p.price, .woocommerce div.product span.price
          {
          flex-direction: column-reverse;
          }
        </style>
        [/wpv-conditional]
        
        <div class="product-features">
        <ul>
          <li>
            <img src="http://crush.test/wp-content/uploads/2020/04/Path-446.svg">
            <p>[types field='product-validity'][/types]</p>
          </li>
          <li>
            <img src="http://crush.test/wp-content/uploads/2020/04/Path-446.svg">
            <p>Prices are exclusive of taxes</p>
          </li>
        </ul>
        </div>
        <!--For Non Logged in Customer -->
        [wpv-conditional if="('[wpv-current-user info='id']' eq  '')"]
         [wpv-woo-buy-options add_to_cart_text="Subscribe Now"]
         <style>
           .single_add_to_cart_button 
           { 
             display: none !important;
           }
        </style>
         <div class="subscribe" onclick="popupOpen();"><button onclick="popupOpen();">Subscribe Now</button></div>
        [/wpv-conditional]
        <!--For Logged in Customer -->
        [wpv-conditional if="('[wpv-current-user info='id']' eq  '')" evaluate="false"]
        <div class="subscribe">[wpv-woo-buy-options add_to_cart_text="Subscribe Now"]</div>
        [/wpv-conditional]
        <!--<div class="subscribe"><a href=""><button>Subscribe Now</button></a>-->
      </div>
        <!-- Sticky button mobile --><!-- For Logged-in Customers -->
[wpv-conditional if="('[wpv-current-user info='id']' eq  '')"]
      
  <div class="subscribe-fixed-button"><button onclick="popupOpen();">Subscribe Now</button></div>
[/wpv-conditional]
<!-- For Logged-in Customers --> 
[wpv-conditional if="('[wpv-current-user info='id']' eq  '')" evaluate="false"]

<div class="subscribe-fixed-button">[wpv-woo-buy-options add_to_cart_text="Subscribe Now"]
  
  </div>
[/wpv-conditional]  
    </div> 
  </div>
</div>
<!-- POPUP Button Content  -->
   <div class="overlay" id="overlay" style="display:none;"></div>
  <div class="popup" id="popup" style="display:none;">
  <div class="popup-inner">
    <div class="s3-btn-close" onclick="popupClose();" ><img src="http://crush.test/wp-content/uploads/2020/04/Layer-2.svg"></div>
    <h2>Login to subscribe</h2>
    <p>To subscribe please login to your account</p>
    <div class="buttons">
      <a href="/customers-login"><button>Login</button></a>
      <a href="http://crush.test/customers-registration/?referrer=[wpv-post-url]"><button>Signup</button></a>
    </div>
  </div>
</div>







/* Popup */
.overlay {
  background:rgba(0,0,0,0.5);
  width: 100%;
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:90;
  transition: all ease 2s;
}
.popup{
  background:white;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:95;
  width:40%;
  height:40%; 
  margin:auto;
  box-shadow: 0 10px 15px rgba(0,0,0,0.6);
  transition: all ease 2s;
}
  /* Popup Inner */
  .popup-inner{
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
   .s3-btn-close{
      position:absolute;
      top:-1em;
      right:-1em;
      cursor:pointer;
      width: 40px;
      height: 40px;
      background:#A4C409;
      border-radius: 50%;
      padding: 10px;
  }
.s3-btn-close img
{
  width: 20px;
  height: 20px;
}
.popup-inner h2
{
  font-size: 32px;
  font-weight: bold;
  text-align:center;
}
.popup-inner p
{
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  margin: 15px auto 20px;
  max-width: 50%;
}
.buttons
{
  display: flex;
  justify-content: center;
}

.buttons button
{
  background: #A4C409;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  padding: 15px 30px;
}
.buttons button:nth-child(1)
{
  margin-right: 15px;
}
.buttons button:focus, .buttons button:hover
{
  background: #A4C409;
  color: #000;
  outline: none;
}
/*End of PopUp */
.site-header, body:not([class*=elementor-page-]) .site-main
{
  max-width: 100%;
}
.site-main
{
  width: 100%;
  max-width: 100%;
  margin:0;
}
.product-page
{
  margin: 80px 50px;
}
.product
{
  display:flex;
  justify-content: space-between;
}
.product-left
{
  font-weight: bold;
  width: 50%;
}
.product-left h4
{
  font-size: 25px;
  color: #A4C409;
}
.product-left h2
{
  font-size: 35px;
  margin: 10px 0;
  max-width: 75%;
}
.product-left .divider
{
  width: 10%;
  height: 10px;
  background: #A4C409;
}
.product-right 
{
  background: #F8F8F8;
  font-weight: bold;
  width: 35%;
  border-radius: 10px;
  height: fit-content;
}
.product-right .head
{
  background: #000;
  padding: 30px;
  border-radius: 10px 10px 0 0;
}
.product-right p
{
  font-size: 16px;
  text-align: center;
  color: #A4C409;
}
.product-right h3
{
  font-size: 20px;
  text-align: center;
  color: #FFF;
  margin: 10px 0;
}
.product-right .foot
{
  padding: 30px 30px 50px;
  font-weight: bold;
}
.product-right .product-image
{
  display: flex;
  justify-content: center;
}
.product-right h4
{
  margin: 15px auto 10px;
}
.product-right .price
{
  font-size: 20px !important;
  color: #000 !important;
}
.product-right .product-features
{
  display: flex;
  justify-content: center;
  margin: 30px auto;
}
.product-right ul li
{
  list-style: none;
  display: flex;
}
.product-right ul>li
{
  margin-bottom: 10px;
}
.product-right ul li img
{
  margin-right: 10px;
  width: 18px;
  height: 18px;
}
.product-right ul li p
{
  font-size: 12px;
  align-self: center;
  color: #797979;
}
.subscribe
{
  display: flex;
  justify-content: center;
  align-items: center;
}
.subscribe button, .woocommerce button.button.alt
{
  background: #A4C409;
  color: #000;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  padding: 15px 35px;
}
.subscribe button:focus, .woocommerce button.button.alt:hover, .woocommerce button.button.alt:focus
{
  background: #A4C409;
  color: #000;
  outline: none;
  border: none;
}
.subscribe-fixed-button
{
  display: none;
}
.woocommerce div.product form.cart
{
  margin-bottom: 0 !important;
}
.woocommerce div.product form.cart .variations label
{
  color: #000 !important;
  font-size: 16px !important;
  display: none!important;
}
.woocommerce div.product form.cart .variations
{
  margin-bottom: 0!important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price
{
  margin-bottom:20px;
  display: flex;
  justify-content: center;
}
.reset_variations
{
  color: #000!important;
    text-decoration: underline;
    margin-top: 15px;
   
}
.value
{
   text-align: center !important;
}
table tbody > tr > td, table tbody > tr:nth-child(odd) > th
{
  background: none !important;
}
.woocommerce div.product form.cart, .single_variation_wrap {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.woocommerce div.product form.cart .button
{
  background: #A4C409 !important;
  color: #000!important;
  font-size: 16px!important;
  border: none;
  border-radius: 10px!important;
  padding: 15px 35px!important;
  opacity: 1 !important;
}
.from
{
  display: none;
}
.woocommerce div.product p.price del, .woocommerce div.product span.price del
          {
          margin-top: 5px !important;
          }
.subscription-details
{
  margin-left: 7px !important;
}
@media only screen and (max-width:728px)
{
  .overlay
  {
    top: 0;
    bottom: 0;
    left: 0%;
    right: 0%;
  }
  .popup
  {
    width: 85%;
    height:45%;
  }
  .popup-inner h2
  {
     font-size: 25px;
  }
 .popup-inner p
  {
     font-size: 16px;
     max-width: 80%;
  }
  .buttons
  {
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
  }
 
  .buttons button
  {
    padding: 15px auto;
    width: 100%;
  }
  .buttons button:nth-child(1)
  {
    margin-right: 0;
    margin-bottom: 15px;
  }
  .product-page
{
  margin: 50px 0px 120px;
}
  .product
  {
   flex-direction: column;
  }
  .product-left, .product-right
  {
    width:100%;
  }
  .product-left h4
{
  font-size: 20px;
}
.product-left h2
{
  font-size: 25px;
  margin: 15px 0 10px;
  max-width: 100%;
}
.product-left .divider
{
  width: 20%;
  height: 7px;
}
  .product-right
  {
    margin-top: 50px;
  }
  .product-right .foot
{
  padding: 30px;
  }
 .subscribe
  {
    display: none;
  }
  .subscribe-fixed-button
  {
    display: block;
  }
  .subscribe-fixed-button button, .woocommerce button.button.alt
{
  background: #A4C409;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 0px;
  padding: 20px 35px;
  position: fixed;
    bottom: 0;
    left: 0;
    width: 100%
}
.woocommerce div.product form.cart .button
{
  border-radius: 0 !important;
}
.woocommerce div.product form.cart, .single_variation_wrap
{
  display: block;
}
.subscribe-fixed-button button, .woocommerce button.button.alt:hover, .woocommerce button.button.alt:focus
{
  background: #A4C409;
  color: #000;
  outline: none;
  border: none;
}
  .footer
  {
    display: none !important;
  }
}





// Popup Open
function popupOpen(){
    document.getElementById("popup").style.display="block";
    document.getElementById("overlay").style.display="block";
    $('#poup').css('overflow','hidden');
	}
// Popup Close
	function popupClose(){
    document.getElementById("popup").style.display="none";
    document.getElementById("overlay").style.display="none";
	}
$(document).ready(function(){
  if( document.getElementById('plan') != null && document.getElementById('time-period') != null) {
    document.getElementById('plan').options[0].innerHTML = "Choose your plan";
document.getElementById('time-period').options[0].innerHTML = "Choose duration";
  }
  
 /* var select1 = document.getElementById('plan');
  var s1 = select1.options[select1.selectedIndex].value;
    var select2 = document.getElementById('time-period');
  var s2 = select2.options[select2.selectedIndex].value;
  
if(s1 == "Live Standard" && s2 == "6 Month")
{
  document.getElementsByClassName('subscription-details')[0].innerHTML = '/6 Months'
}*/
});