Skip to main content

Posts

Showing posts from September, 2020

How to create stylish table with shorting and pagination in php and jquery?

  Create stylish table with shorting and pagination in php and jquery. <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"> <!-- <script src="https://code.jquery.com/jquery-1.12.3.js"></script> <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> <script src="ht

WooCommerce: Display Product Gallery Vertically (Single Product Page)

   Paste this code in function.php add_filter ( 'woocommerce_product_thumbnails_columns', 'change_product_gallery_columns' );   function change_product_gallery_columns() {      return 1;  } Paste css in style.css /* Make image 75% width to make room to its right */ .single-product div.product .woocommerce-product-gallery .flex-viewport {     width: 75%;     float: right; } /* Make Gallery 25% width and place it beside the image */   .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {     width: 25%;     float: right;     margin: 0; } /* Style each Thumbnail with width and margins */   .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {     width: 90%;     float: none;     margin: 0 0 10% 10%; }