<header>
  <h2>My Header</h2>
  <div class="console"></div>
</header>
<div class="container">
  <div class="product">
  <div class="woocommerce-product-gallery">
    <img src="https://source.unsplash.com/random/600x600" alt="">
  </div>
  <div class="summary">
    <h1 class="product_title entry-title">Product Title</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem explicabo ea quis ipsum placeat ab omnis laudantium deleniti dolorem nemo molestias earum autem repudiandae, optio et deserunt, non eligendi eaque.</p>
    
  <button class="btn btn-primary">Buy now</button>
  </div>
  <div class="woocommerce-tabs"></div>
</div>
</div>
  <footer>
    <h2><strike>My footer</strike>
      <small>Not really, Woocommerce tabs</small>
    </h2>
  </footer>
/*Wordpress simulation - Unnecesary to copy*/

header, footer{
  h2{
    text-align: center;
    padding: 20vh;
    background: #dadada;
  }
}

.clearfix{
  display: table;
  clear: both;
  width:100%;
}

.product{
  
  margin: 20vh 0;
    
  @media (min-width: 992px){
  
    .woocommerce-product-gallery {
      
        float: left;
        width: 54%;
        margin-right: 3rem;
        margin-bottom: 0;

        &.fixed{
            position: fixed;
            top: 5px;
        }

    }

    .summary {
        width: calc(46% - 3rem);
        float: right;
    }
    
  }
  
  .woocommerce-tabs {
      display: inline-block;
      width: 100%;
      margin-top: 2rem;
      clear: both;
      overflow: hidden;
  }
}
View Compiled 
    function fixingImage() {
        
        let image = document.querySelector(".woocommerce-product-gallery");
        let wootabs = document.querySelector(".woocommerce-tabs");
        let iniImageTop = image.offsetTop;
        let iniWootabsTop = wootabs.offsetTop;
        
        window.addEventListener("scroll", function(){
            
            var tabDistance = (window.scrollY + image.offsetHeight) - wootabs.offsetTop;
            
            if( window.scrollY <= iniImageTop || tabDistance > 0){
                image.classList.remove("fixed");
            }else if( window.scrollY >= iniImageTop ){
                image.classList.add("fixed");
            }
        });
    }

    fixingImage();

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.