Display Product Description on Shopify Cart Page

Tested on “Dawn Theme”

<div class="cart-item__product__description">{{ item.product.description }}</div>

Add the code to the main-cart-items.liquid file.

The post Display Product Description On Shopify Cart Page first appeared on identity design.

The post Display Product Description On Shopify Cart Page appeared first on identity design.

Display Inventory Quantity on Shopify Product Page

Tested on “Dawn Theme”

<div class="quantity_available">{% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
{{ product.variants.first.inventory_quantity }} items available in stock.
{% endif %}</div>

Add this code right above this code from main-product.liquid file.

{%- when 'popup' -%}

The “8 items available in stock.” is now displayed above the Add to cart button.

The post Display Inventory Quantity “X items available in stock” On Shopify Product Page first appeared on identity design.

The post Display Inventory Quantity “X items available in stock” On Shopify Product Page appeared first on identity design.

<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://blog.identitydesign.us/img/bg1.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://blog.identitydesign.us/img/bg2.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://blog.identitydesign.us/img/bg3.jpg">
    </div>
  </div>
</div>

Change Sliding Animation to a “Fade” Effect

Add a class name, carousel-face right after slide. You can also add data-interval="3000" to control the speed of the animation. 1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000">

Remove the Sliding Effect Completely

You can completely remove the sliding effect on your carousel. Simply remove slide from the class of div.

<div id="carousel" class="carousel" data-ride="carousel">

The post How to Change Bootstrap Carousel Slider Animation to Fade Out Effect or Remove the Sliding Effect first appeared on identity design.

The post How to Change Bootstrap Carousel Slider Animation to Fade Out Effect or Remove the Sliding Effect appeared first on identity design.

p.stars a:before, p.stars a:hover, p.stars a:visited, p.stars a:focus, p.stars a:hover~a:before, p.stars:hover a:before, p.stars.selected a:not(.active):before, p.stars.selected a.active:before, p.stars.selected a.active~a:before {
    font-family: 'star';
    content: '\53';
    line-height: 1.4 !important;
}

How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns

Best Free Stock Photo Sites for Commercial Use

Freebies: Foodie Website Mock Up Template (PSD)

The post Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review first appeared on identity design.

The post Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review appeared first on identity design.

<script> 
$('.YOUR-CLASS-NAME').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href="YOUR-URL-LINK"></a>');
});
</script>

You need to replace .YOUR-CLASS-NAME with your div’s class and replace "YOUR-URL-LINK" with your destination link. Pretty simple, heh?

The post Make Clickable Link with JavaScript instead of HTML Anchor first appeared on identity design.

The post Make Clickable Link with JavaScript instead of HTML Anchor appeared first on identity design.

Bootstrap is one of the most popular, powerful and light HTML/CSS/JavaScript Responsive framework for developers, and it’s also available for WordPress as well. To use the Bootstrap carousel slider below is setting to change slider time interval (transition speed of slider images). Don’t get confused with changing the core JavaScript or CSS files.

Bootstrap Carousel Slider Time Interval Setting

Default Bootstrap Carousel Slider Snippet

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 <li data-target="#myCarousel" data-slide-to="3"></li>
 </ol>
 
 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active"> <img src="img_chania.jpg" alt="Chania"> </div>
 <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div>
 <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div>
 <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div>
 </div>
 
 <!-- Left and right controls --> 
 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a> 
</div>

Add the ‘data-interval’ on the first line of code

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>

1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.

Change Slider Animation Time in CSS

The default slider animation time, which is called ‘transition’ property, is 0.6 seconds. You can also slow down or make the animation time faster in css.

On you own css, add the followeing lines if you want to change the animation time. To make the animation slower, increase the time by 1.2 seconds for example:

.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.2s ease-in-out !important;
    -o-transition: -o-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
}

All-in-one Bootstrap 4 / Jquery Responsive HTML Template

Bootstrap Uneven Column Heights Issue in Layout Grid System

How to Remove “Bootstrap WordPress Theme” on WP Bootstrap Starter Template

How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns

Best Free Stock Photo Sites for Commercial Use

Freebies: Foodie Website Mock Up Template (PSD)

The post How to Change Bootstrap Carousel Slider Transition Speed Time Interval first appeared on identity design.

The post How to Change Bootstrap Carousel Slider Transition Speed Time Interval appeared first on identity design.

DEMO: How to Vertically Align Middle with CSS

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

In case if this css isn’t working, you can try as below.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

You can tweak around with different colors of the boxes or texts. Have fun!

The post CSS Vertical Align Center first appeared on identity design.

The post CSS Vertical Align Center appeared first on identity design.

DEMO: How It Looks

CSS

Copy the code below and paste into your CSS document.

table tr td { padding:20px }
table td:nth-child(1) { width:35%; }
table td:nth-child(2) { width:15%; }
table td:nth-child(3) { width:5%; }
table td:nth-child(4) { width:35%; }
table td:nth-child(5) { width:10%; }

HTML

Copy the code below and paste into your HTML document.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

You can copy both CSS and HTML codes to your file and tweak around as you like!

The post CSS: A Simple Way to Set the Table Column Width first appeared on identity design.

The post CSS: A Simple Way to Set the Table Column Width appeared first on identity design.

I’ve tried to follow other tutorials, but for some reason it didn’t work out for me. So I’ve done some other testings and finally it worked out! Now, let me introduce to how to migrate Joomla users to WordPress users. The versions I’ve used is Joomla 1.5 to WordPress 3. Here’s how as simple as:

1. On your Joomla site, export users to a CSV file.

To export Joomla users data, use ‘ARRA User Export Import’ plugin.

• Install plugin and go to the plugin page (Admin – Components – ARRA User Export Import)
  
• Click on ‘User Export’, mark the following check boxes, and “Export”!
  
• You’ll get a “CSV” file.

2. Tweak the CSV file before import to your WordPress site.

• You can open the file with Dreamweaver, Microsoft Excel, or one of the text editors you already have.
• Just need to change very top row.
  Edit text as the following table (Top to Bottom) and save.

  first name	last name	username	email	password	usertype
  first_name	last_name	user_login	user_email	joomlapass	role

  *Sometimes Microsoft Excel won’t save it right. I recommend Dreamweaver.

3. Import the CSV file to your WordPress site.

• To install plugin, on your wordpress site, go to Admin – Plugins – Add new.
  
• Search for ‘Import Users from CSV’,
  
  ‘Install Now’, and ‘Activate Plugin’.
  
• Go to ‘Users’ – ‘Import from CSV’
  
• Drag your updated ‘.CSV’ file to the ‘Choose File’ filed, “Import”!
  
• Check your ‘Users’ – ‘All Users” page to see everything looks right!
  

The post Migrating Joomla to WordPress first appeared on identity design.

The post Migrating Joomla to WordPress appeared first on identity design.