CSS Tips and Best Practices for the TapGoods WordPress Plugin
This guide will help you customize the visual elements of the TapGoods plugin on your WordPress site, including changing colors and adjusting layout attributes. You'll learn how to update CSS properties to modify the appearance to fit your website's theme better.
How to Change Colors
Changing the Primary Color:
To change the primary color, update the --tg-color-primary variable in your CSS to your desired hex code.
This will impact the following areas:
- Cart Icon
- Inventory filter
- Add to Cart button
- Several places on the Item pages
Changing the Secondary Color
The secondary color is used on the inventory filter.
To update this color, modify the --tg-dark-secondary variable in your CSS with your new color hex code.
Changing the Cart Icon Color
To change the color of the cart icon, adjust the fill property under button#tg_cart path in your CSS to the color you want.
Note: Check out our guide on using Shortcodes to add a cart icon to your WordPress site!
Removing the Background from the Cart Icon
If you want to remove the background color from the cart icon, set the background-color property of button#tg_cart to transparent and remove any padding by setting padding to 0.
Note: Check out our guide on using Shortcodes to add a cart icon to your WordPress site!
Adjusting Item Pages
Inventory Grid Display
Use the [tapgoods-inventory] shortcode to display your inventory in a grid layout. If you need to adjust the layout, such as making the quantity field and the button the same height, you would need to set the height, margin, and border properties for both:
- .tapgoods#tg-shop .add-to-cart button
- .tapgoods#tg-shop .add-to-cart input.form-control
This is what the code would look like:
When aligning elements such as buttons and input fields, remember that each WordPress theme may affect how these elements are displayed.
Because themes apply their own styles to elements, the margins that work well with one theme might not look right with another. Here are some tips for experimenting and adjusting the margins:
- Start with Small Increments: Begin by adjusting the margins in small increments to see how they affect the alignment of your buttons and fields. This can help you understand the extent of the changes needed without making drastic alterations that could disrupt your layout.
- Use Developer Tools: Use the developer tools in your web browser to experiment with different margin settings live. Right-click on an element and select “Inspect” to modify its CSS properties on the fly. This method allows you to see changes in real-time and find the perfect setting before applying it to your site.
- Document Your Changes: Keep a record of the margin values that work best with your theme. This documentation can be a quick reference for future adjustments or if you decide to switch themes.
How to Hide Elements on Item Pages
To hide extra content that appears on your item pages which may not be necessary, such as additional WordPress theme elements, identify the class name or ID of the content you want to hide. You can then set the display property for that class or ID to none.
To identify the class name or ID of the content you want to hide, follow these steps:
- Right-click on the content you want to hide
- Find the class name (or ID) in the CSS code.
This is what the code should look like:
Adjusting the Quantity Field & “Add Item” Button Height
For some WordPress themes, you may find that the “Quantity” field and “Add Item” button are not aligned. This is how they should look:
If you find that they are not aligned, you can adjust the height, margin, and border of these elements to fix the issue. For this code, you will be adjusting two elements:
- tapgoods #tg-single .quantity-select .btn
- .tapgoods #tg-single .quantity-select .qty-input
Here is how the code should look:
Here’s some recommendations to consider:
- Height: Set both the button and the input field to the same height to ensure they line up correctly. For example, you might choose a height of 55px for a balanced look.
- Margin: Setting the margin to 0 helps align these elements closely without any unwanted space around them.
- Border: Removing the border by setting it to 0 can help create a seamless appearance, particularly if your site has a minimalist design.
- The !important declaration forces the style to be applied, overriding styles from your theme or other plugins. Use this cautiously, as it can make further style changes more challenging.
Troubleshooting Tips
If changes do not appear:
- Ensure you are targeting the correct class or ID. Use the browser's "Inspect" tool to confirm.
Use the !important rule in your CSS to override other styles if necessary, ensuring your custom styles take precedence.