CSS Tag Archives - Page 2 of 2

How to Remove Horizontal Line under Page Title in Storefront Theme

February 26, 2015 By John 2 Comments

Updated 18/2/16 due to Theme Update

For one reason or another, you might find that you’d like to remove that horizontal line just below the page title in Storefront theme. The horizontal line becomes prominent when you don’t have a title for your page which could happen on home pages.

Remove Horizontal Line under Page Title in Storefront Theme — That line that the arrow is pointing at.

To remove the horizontal line, simply add the code below to your child theme Styles.css file.

.page-template-template-homepage-php .hentry .entry-header, .page-template-template-homepage-php .hentry .entry-header h1 {
 border-bottom: 0;
margin-bottom: 0px;
 }

The code “margin-bottom: 0px;” is necessary to remove the bit of extra spacing below where the line used to be.

Now you know how to remove horizontal line under page title in Storefront Theme but if that doesn’t fix your problem, let us know in the comments.

How to Specify CSS Styling on a Single WordPress Page

March 5, 2015 By John Leave a Comment

Understanding a bit of CSS is a useful skill for a website owner. Now, suppose you wanted to apply a line of CSS styling on just a single page instead of the entire site. Learning how to target your CSS to specific pages can solve hours of frustration when a code snippet isn’t readily available on the internet.

Let’s use this example: we’re going to hide the page title of just the Home Page.

The basic CSS for hiding a page title will usually look like this:

.main-title {
display: none;
}

When you copy the code above and place it in your styles.css file, it should hide all the page titles in the website. Normally, we’d stop there if that was what we wanted but we just want to hide the page title on the home page.

Basically, the code right now is targeting the display attribute for the main-title element. There is however no indication of which main-title is targeted. Is it the main-title on the home page? Is it the main-title on the About page? For cases like these, all main-titles will be affected.

To target a specific page, you need to add another selector and it looks like this:

.home .main-title {
display: none;
}

The “.home” part is the part that indicates which main-title we are targeting.

Now, our next challenge will be figuring out what to write in the “.home” part. For that, we need to look at the page source. Look for the start of the <body> HTML. You will then see something like this:

Notice those classes? Those are what we use for the selectors. We can’t just use any of those though because other pages might be using the same classes and if that’s the case, those other pages will be affected by your CSS as well. We have to find the class unique to that page and in this case it is “home”.

On this next example, the unique class which is also the page ID is “page-id-155”. When we make use of “.page-id-155”, we are basically specifying that only that page should be affected by any CSS you write next to it.

However, there are cases where you might have trouble finding the unique class or the page ID is not indicated as one of the classes. In this case, you should go edit that page in the WordPress dashboard. Once you are in the edit page, check out the URL in the address bar. The number corresponding to post= is your page ID that you can then use to target that page.

That’s about it. And do keep in mind that this knowledge isn’t simply limited to your page titles. Here are some more applications:

Hiding the widget area for some of your pages.
Reducing/enlarging the main content area depending on the current page.
Keeping font/color styling on specific pages

When you know the unique class or page ID you can target specific pages with your CSS styling now and I hope it helps you make your website become the best it can be.

Now you know how to specify CSS styling on a single WordPress page. Got questions? Head over to the comments section.

Woocommerce 2.3 Update: New Features and Common Issues Encountered

March 11, 2015 By John 4 Comments

It has been a month now since Woocommerce 2.3 was officially released. There has been mixed feelings about the new version. Some users find the new features awesome while others struggle to keep it together. To give you a recap, here are the new features of Woocommerce 2.3 “Handsome Hippo”.

Woocommerce 2.3 Features

User Interface and User Experience Update- Woocommerce 2.3, also known as the handsome hippo, has a flat design that goes well with many themes. The messages, notices (2 in the figure below), buttons (4), and the payment box during checkout has an updated look.

The cart template is also updated. The “Proceed to Checkout” button (5) was moved under the cart totals to enhance user experience. Another cool feature is the undo option (1) in the cart. That means that if you accidentally removed a product on your cart you can easily add it back in using the undo button. You also have the option to remove product from the cart widget (6), which I think is a really cool update on the default style template.

There are also several features that were removed due to redundancy. The option to change the colors of the buttons as well as the increment and decrement button (3) were removed. Now, if you want to add those features back, you need to install additional plugins.

Woocommerce 2.3 also introduced an opt-in usage tracking that allows the Woocommerce team to view the settings of sites. This will allow them to upgrade their system to fit the requirements of their users. You will have an option to disable tracking in the woocommerce dashboard using this path: Woocommerce/System Status/Tools. Simply click the Reset Usage Tracking Settings button.

Coupons Update- This is probably one of the major updates in Woocommerce 2.3. Coupons will no longer be applied before taxes. The “apply before tax” option has been removed in the woocommerce settings.

Aside from that, the rest of the coupons settings are left untouched. However, there are still a few issues with coupons that has not yet been sorted out on the latest version of woocommerce 2.3. We will get to that in a sec.

Emails- woocommerce 2.3 makes it easier for developers to override the CSS of emails sent through woocommerce. Additional hooks are created so that developers can easily adjust the CSS templates according to their preferences. In addition to that, emails sent will be using the woocommerce core templates but will also allow plugin templates to blend in with the shop emails.

Geolocation- Now, with “Handsome Hippo”, you can easily locate your customers by using their IPs. This can be used to calculate tax based on the users estimated location.

Issues Encountered

Woocommerce informed large theme companies about the changes before releasing Woocommerce 2.3. Prior to the official release, Woocommerce also released Woocommerce 2.3 beta so that they can work hand in hand with theme companies and plugin authors to make the release as smooth as possible. Though a lot of site owners welcome the design update on the front-end, some sites suffered from CSS and theme incompatibility and had to do a complete overhaul. Woocommerce 2.3 started using Sass, and there are inevitable plugin incompatibilities encountered by sites that use plugins using LESS.

The image below is taken from one of our sites that we manage. You will notice that the buttons, due to the flat design, need fixing. You can barely see the labels of the buttons.

To fix this issue, Woocommerce suggests installing a plugin that will allow site owners to easily change the colors of buttons and other elements on their sites. You can customize the buttons by clicking Appearance/Customize/Woocommerce.

On the same site, we also encountered problems with the application of coupon codes. Though the products added are exclusive of tax, which means that the tax calculations will not be affected, we experienced a weird issue with the application of coupons on top of a free shipping rule. The free shipping rule allows customers to get free shipping when the item bought is more than $49.

If you look at the image below, instead of displaying the free shipping note on the “Shipping and Handling”, it has been replaced by a radio. Here you will have the option to either choose free shipping or flat rate, which doesn’t make sense because customers would always want to choose the free shipping option. Aside from that, if you apply a coupon and the order total falls below $49, the flat rate automatically kicks in without the free shipping option. The store owner would not want that to happen and this issue only started after the Woocommerce 2.3 update. We will be discussing the solution to this issue on our next article.

Conclusion

Keeping your plugins up to date is very important. However, with major updates like this, it is best that you create several backups of your live site before doing anything. In some cases, it might even be necessary to copy your live site to a development site. Doing plugin updates on the development site allows you to fix errors caused by the update and at the same time reduce losses due to downtime.

The woocommerce team spend so much time and dedication for this update. Though there may be some hiccups along the way, their proactive communication with theme companies have been really helpful in ensuring that the update will not cause serious problems to their users.

If you have encountered some issues regarding the woocommerce 2.3 update or if you want to share your take on the new features of woocommerce, feel free to leave your comments below.

How to Remove Horizontal Line under Page Title in Storefront Theme

How to Specify CSS Styling on a Single WordPress Page

Woocommerce 2.3 Update: New Features and Common Issues Encountered

Woocommerce 2.3 Features

Issues Encountered

Conclusion

Get started today

Get 2 Hours of FREE SUPPORT

Free eBook

Quick Links

Wooassist

Connect