add_filter( 'facetwp_sort_options', 'options_per_url', 10, 2 );
function options_per_url( $options, $params) {
$uri = FWP()->helper->get_uri();
if ( $uri == 'demo/product-tag/catalog') {
$options = [
'default' => [
'label' => __( 'New arrivals', 'fwp' ),
'query_args' => [
'orderby' => 'date',
'order' => 'DESC',
]
],
'popularity_new' => [
'label' => 'Popual',
'query_args' => [
'orderby' => 'post_views',
'order' => 'DESC',
]
]
];
}
else {
$options = [
'price_asc' => [
'label' => 'Price ASC',
'query_args' => [
'orderby' => 'meta_value_num',
'meta_key' => '_price',
'order' => 'ASC',
]
],
'price_desc' => [
'label' => 'Price DESC',
'query_args' => [
'orderby' => 'meta_value_num',
'meta_key' => '_price',
'order' => 'DESC',
]
],
}
return $options;
}
I used the Categories Images plugin to add images to my attribute terms (pa_brands) and a custom template to create the actual page and add it in my menu.
<div class="row-flex">
<?php foreach (get_terms('pa_brands') as $cat) : ?>
<div class="child">
<a href="<?php echo get_term_link($cat->slug, 'pa_brands'); ?>"><img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" /></a>
</div>
<?php endforeach; ?>
</div>
.row-flex {
display:flex; justify-content: center; align-items: center; flex-wrap: wrap;
}
.child {
width: 189px;
height: 150px;
margin: auto;
align-self: flex-start;
display: flex;
align-items: center;
}
Sources:
- https://www.taniarascia.com/how-to-create-and-use-bash-scripts/
- https://www.presslabs.com/code/wp-cli-guide-wp-term/
- https://stackoverflow.com/questions/59084630/wp-cli-wc-product-create-custom-attributes
My recipes:
# Check themes, core, plugins for updates alias check-all='wp core check-update && wp plugin list --update=available && wp theme list --update=available' # Update all that it can be updated alias update-all='wp core update && wp plugin update --all && wp theme update --all' # Get all product ids OF category 53wp wc product list --category=53 --user=2 --field=id
# Update the category of product with id 374 to 33wp wc product update 374 --categories='[{"id":33}]' --user=2
# Move products to another category. You have to add the current category otherwise it does not work. !/usr/bin/bash for post in $(wp wc product list --category=54 --user=2 --field=id) do wp wc product update $post --categories='[{"id":52},{"id":54}]' --user=2 done # Add these attributes to the products of this category !/bin/bash for post in $(wp wc product list --category=57 --user=2 --format=ids) do wp wc product update $post --user=2 --attributes='[{"id":1,"name":"Color","position":0, "visible":true,"options":["Blue","Red"]}]'; done
This requires some work on your part, and archives must be enabled.
What this means is that you have to open the attribute name and

for some strange reason no one has a freakin image @#$@%^#$^$%^$%^$%^%$^%$

The parent should not be positioned!!!!!!!
.child-div {
position:absolute;
left:0;
right:0;
}
I see lots of new WP users trying to optimize their sites using the most advanced plugins and methods, DONT!. Most of the times you end up destroying your site and spend many hours debugging. The following plugins will help you without needing to change their default settings or read tutorials.
- No 1 thing to keep in mind is to clear your cache regularly to actually see what your visitors see. Using a browser with empty cache just for that is the easiest way.
- No 2 , if you use a bloated theme and 100 plugins no need to go the extra mile to optimize your site, it is not possible.
WP Super Cache, really easy to use without having to change the defaults. Plenty of documentation and tutorials. Works with WooCommerce and if you have a good host you can enable the ‘expert’ mode.
Autoptimize, use it for HTML, CSS, JS and images.
Redis Object Cache, caches your database queries, unfortunately you need a good hosting company to support it and it can cause trouble some times 🙂
To make it sticky I used the offsetParent, offsetTop and scrollY properties. I placed the button in a positioned element ( not sticky ) hid it with opacity so I can animate it and get the offsetParent ( does not work with display:none; ) and then used scrollY to change it’s opacity. I added a class ‘.sticky-facetwp’ to the button to target it.
The CSS
button.sticky-facetwp {
opacity: 0;
position: absolute;
z-index: 99;
color:#000 !important;
transition-property: opacity;
transition-duration: 1s;
transition-delay: 0s;
}
.archive button.fixed-sticky-facetwp {
opacity: 1;
position: fixed;
}
The JS
const page = document.querySelector('#content')
// get the filter button
const theFilter = document.querySelector('.sticky-facetwp')
const theFilterTop = theFilter.offsetTop
function stickyfacetwp() {
if (window.scrollY >= theFilterTop) {
theFilter.classList.add('fixed-sticky-facetwp');
} else {
theFilter.classList.remove('fixed-sticky-facetwp');
}
}
window.addEventListener('scroll', stickyfacetwp)
Scripts without
async
,defer
ortype="module"
attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.
To get the offsetHeight when using an inline script you can use an event listener like
window.addEventListener(‘load’, start);
load to wait for all assets OR link the script with ‘src’
<script src=”app.js”></script>
to load it after the assets loaded.
If you are new to WP, chances are that you will have issues with your site. Do not panic, you can ask for help or google the exact problem/error you have, most of the times you will find many resources with fixes. From my experience 90% of the cases can be diagnosed easily though.
First things to try :
- Disable any caching/optimization plugins, clear your browser’s cache!
- Disable all your plugins or the ones you do not need to view/use your site.
- Switch to one of the default WP themes ( twenty fifteen, twenty nineteen etc)
If you do these and still have the same problem, like not able to view your site or create a post, here are more advanced ways to find the problem.
If again you cannot find the culprit it is better to hire a professional : )
tip: always work on a staging site!
© 2023 Simplesteps for WordPress
Theme by Anders Norén — Up ↑